作者： cuike519的專欄?? http://blog.csdn.net/cuike519/
?本文詳細介紹了如何實現在點擊DropDownList的時候彈出DataGrid，然后從DataGrid里面選擇相應的項。
?????? 很早就發現在網上有很酷的下拉選擇框，今天我在這里也寫一個，該方法旨在說明問題的一個解決方法，該方法可以擴展為自定義控件，由于時間有限所以在這里我只提供一個該方法的頁面實現。當然你可以發揮你的才能作出更漂亮的。
??????? 問題描述：我們在使用DropDownList的時候經常會碰到這樣的問題（至少我碰到了），在一個很小的區域顯示一個比較復雜的內容，希望讓選擇的人對要選擇的東西有比較清晰的認識，我們需要在點擊下拉框的時候可以顯示給用戶非常詳細的信息，可是由于布局的限制或者由于下拉框本身的限制，我們很難做到。
??????? 解決方案：我們希望有一個層來顯示一個豐富的內容，既然是豐富的內容，我們首先想到的應該是DataGrid控件，那么好，我們就用DataGrid和TextBox以及Button來實現該功能。
??????? 需要了解的知識：一點點js的東西，一點點ASP.NET的東西，還有一點點耐心
??????? 下面是代碼：
???????? 我們需要一個層用來放我們的DataGrid，我們叫他divParent。代碼如下：
<div id="divParent" style="OVERFLOW:auto;POSITION:absolute;HEIGHT:300px;"></div>
???????? 接著我們需要一個TextBox和一個Button，TextBox是服務器控件，Button是一個客戶端控件代碼如下：
<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
<INPUT type="button" value="6" style="FONT-FAMILY: marlett" οnclick="ShowDetail('TextBox1','grdContent')">
????????我們將Button的字體設置成marlett這樣可以使用“6”來顯示一個下拉箭頭當然你也可以使用一個圖片。
??????? 接著就是DataGrid了，DataGrid的代碼如下：
<div style='DISPLAY:none'>
<asp:DataGrid id="grdContent" runat="server" ShowHeader="False" BackColor="#FFFFFF"></asp:DataGrid>
</div>
??????? 我們使用了一個層來隱藏該DataGrid，這樣用戶就看不到這個DataGrid了，只有在選擇的時候才顯示該DataGrid。
???????? 此處還可以使用PowerDataGrid來顯示一個漂亮的DataGrid對象，同時可以固定表頭。（有關PowerDataGrid請到 www.foxhis.com/powermjtest/處下載）
固定表頭的DataGrid的實現可以參考我的另一篇文章（ http://www.csdn.net/Develop/read_article.asp?id=25538）

????????上面是客戶端的表示，下面就是為了實現該效果而做的客戶端邏輯，該邏輯由3個js函數實現。代碼如下：
<SCRIPT LANGUAGE="JavaScript">
// 顯示datagrid提供詳細內容
function ShowDetail(txt,grd){
?var datagridParent = document.getElementById('divParent');//首先找到datagrid的容器
?var txtobj = document.getElementById(txt);//找到需要需要顯示選擇內容的TextBox
?var datagrid = document.getElementById(grd);//找到DataGrid呈現的客戶端表格
?// 下面就是顯示datagrid和隱藏datagrid時候做的顯示開關
?if(datagridParent.innerHTML == ''){
??document.getElementById('divParent').innerHTML = datagrid.outerHTML;
?}
?else{
??HideLayer();
?}
?// 定位要顯示的層的位置
?document.getElementById('divParent').style.pixelLeft=txtobj.offsetLeft;
?document.getElementById('divParent').style.pixelTop=txtobj.offsetTop+txtobj.offsetHeight;
}
// 當選擇表格中的行的時候將感興趣的內容顯示到文本框中
// txt顯示內容的目標控件,row用戶點擊的行對象，colID用戶要顯示的列的內容
// 使用row和ColID可以定位一個單元格
function GetRowData(txt,row,colID){
?var txtobj = document.getElementById(txt);
?txtobj.value = row.cells[colID].innerText;
?HideLayer();//選擇完以后隱藏層
}
// 隱藏層
function HideLayer(){
?document.getElementById('divParent').innerHTML = '';
}
</SCRIPT>
???????? 代碼的詳細解釋請看代碼注釋。
???????? 下面是CS部分的代碼，首先我們需要給DataGrid綁定數據代碼，我們在Page_Load里面寫如下代碼：
if(!this.IsPostBack){
?SqlConnection con = new SqlConnection("server=localhost;database=pubs;uid=sa;pwd=sa;");
?SqlDataAdapter da = new SqlDataAdapter("select au_lname+' '+au_fname,city from authors",con);
?DataSet ds = new DataSet();
?da.Fill(ds);
?this.grdContent.DataSource = ds.Tables[0];
?this.grdContent.DataBind();
}
??????? 最后我們需要在該DataGrid綁定數據的時候做點什么，下面是我們做的事情，代碼如下：
private void grdContent_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e) {
?e.Item.Attributes.Add("onmouseover", "this.bgColor='#f1f1f1'");
?e.Item.Attributes.Add("onmouseout", "this.bgColor='#ffffff'");
?e.Item.Attributes.Add("onclick", "GetRowData('"+this.TextBox1.ClientID+"',this,1)");
}
??????? 我們首先需要給用戶一個醒目的鼠標移動的效果所以我們使用將onmouseover和onmouseout指定到tr對象上，之后我們將給tr編寫onclick
事件相應所要激發的函數。（tr是DataGrid呈現在客戶端以后的行對象）
??????? 好了，到此我們的程序就寫完了。
??????? 對該工程有任何問題請發送郵件到wu_jian830@hotmail.com。如果您需要源代碼，您也可以發送郵件。

祝：工作順利！

總結

以上是生活随笔為你收集整理的如何实现可以带详细表格的DropDownList的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。