如何實現可以帶詳細表格的DropDownList

　　本文詳細介紹了如何實現在點擊DropDownList的時候彈出DataGrid然後從DataGrid裡面選擇相應的項
　　
　　很早就發現在網上有很酷的下拉選擇框今天我在這裡也寫一個該方法旨在說明問題的一個解決方法該方法可以擴展為自定義控件由於時間有限所以在這裡我只提供一個該方法的頁面實現當然你可以發揮你的才能作出更漂亮的
　　
　　問題描述我們在使用DropDownList的時候經常會碰到這樣的問題（至少我碰到了）在一個很小的區域顯示一個比較復雜的內容希望讓選擇的人對要選擇的東西有比較清晰的認識我們需要在點擊下拉框的時候可以顯示給用戶非常詳細的信息可是由於布局的限制或者由於下拉框本身的限制我們很難做到
　　
　　解決方案我們希望有一個層來顯示一個豐富的內容既然是豐富的內容我們首先想到的應該是DataGrid控件那麼好我們就用DataGrid和TextBox以及Button來實現該功能
　　需要了解的知識一點點js的東西一點點ASPNET的東西還有一點點耐心
　　
　　下面是代碼
　　我們需要一個層用來放我們的DataGrid我們叫他divParent代碼如下
　　<div id=divParent ></div>
　　接著我們需要一個TextBox和一個ButtonTextBox是服務器控件Button是一個客戶端控件代碼如下
　　<asp:TextBox id=TextBox runat=server></asp:TextBox>
　　<INPUT type=button value= onclick=ShowDetail(TextBoxgrdContent)>
　　我們將Button的字體設置成marlett這樣可以使用來顯示一個下拉箭頭當然你也可以使用一個圖片
　　
　　接著就是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請到/powermjtest/處下載）
　　固定表頭的DataGrid的實現可以參考我的另一篇文章（?id=）
　　
　　上面是客戶端的表示下面就是為了實現該效果而做的客戶端邏輯該邏輯由個js函數實現代碼如下
　　<SCRIPT LANGUAGE=JavaScript>
　　// 顯示datagrid提供詳細內容
　　function ShowDetail(txtgrd){
　　var datagridParent = documentgetElementById(divParent);//首先找到datagrid的容器
　　var txtobj = documentgetElementById(txt);//找到需要需要顯示選擇內容的TextBox
　　var datagrid = documentgetElementById(grd);//找到DataGrid呈現的客戶端表格
　　// 下面就是顯示datagrid和隱藏datagrid時候做的顯示開關
　　if(datagridParentinnerHTML == ){
　　documentgetElementById(divParent)innerHTML = datagridouterHTML;
　　}
　　else{
　　HideLayer();
　　}
　　// 定位要顯示的層的位置
　　documentgetElementById(divParent)stylepixelLeft=txtobjoffsetLeft;
　　documentgetElementById(divParent)stylepixelTop=txtobjoffsetTop+txtobjoffsetHeight;
　　}
　　// 當選擇表格中的行的時候將感興趣的內容顯示到文本框中
　　// txt顯示內容的目標控件row用戶點擊的行對象colID用戶要顯示的列的內容
　　// 使用row和ColID可以定位一個單元格
　　function GetRowData(txtrowcolID){
　　var txtobj = documentgetElementById(txt);
　　txtobjvalue = rowcells[colID]innerText;
　　HideLayer();//選擇完以後隱藏層
　　}
　　// 隱藏層
　　function HideLayer(){
　　documentgetElementById(divParent)innerHTML = ;
　　}
　　</SCRIPT>
　　代碼的詳細解釋請看代碼注釋
　　下面是CS部分的代碼首先我們需要給DataGrid綁定數據代碼我們在Page_Load裡面寫如下代碼
　　if(!thisIsPostBack){
　　SqlConnection con = new SqlConnection(server=localhost;database=pubs;uid=sa;pwd=sa;);
　　SqlDataAdapter da = new SqlDataAdapter(select au_lname+ +au_fnamecity from authorscon);
　　DataSet ds = new DataSet();
　　daFill(ds);
　　thisgrdContentDataSource = dsTables[];
　　thisgrdContentDataBind();
　　}
　　最後我們需要在該DataGrid綁定數據的時候做點什麼下面是我們做的事情代碼如下
　　private void grdContent_ItemDataBound(object sender SystemWebUIWebControlsDataGridItemEventArgs e) {
　　eItemAttributesAdd(onmouseover thisbgColor=#fff);
　　eItemAttributesAdd(onmouseout thisbgColor=#ffffff);
　　eItemAttributesAdd(onclick GetRowData(+thisTextBoxClientID+this));
　　}
　　我們首先需要給用戶一個醒目的鼠標移動的效果所以我們使用將onmouseover和onmouseout指定到tr對象上之後我們將給tr編寫onclick
　　事件相應所要激發的函數（tr是DataGrid呈現在客戶端以後的行對象）
　　
　　好了到此我們的程序就寫完了
　　對該工程有任何問題請發送郵件到wu如果您需要源代碼您也可以發送郵件
　　

From:http://tw.wingwit.com/Article/os/youhua/201311/10914.html