本文詳細介紹了如何實現在點擊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" onclick="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呈現在客戶端以後的行對象）
好了，到此我們的程序就寫完了。
