如何實現(xiàn)可以帶詳細表格的dropDownList
2024-07-21 02:25:42
供稿：網(wǎng)友
本文詳細介紹了如何實現(xiàn)在點擊dropdownlist的時候彈出datagrid，然后從datagrid里面選擇相應的項。
很早就發(fā)現(xiàn)在網(wǎng)上有很酷的下拉選擇框，今天我在這里也寫一個，該方法旨在說明問題的一個解決方法，該方法可以擴展為自定義控件，由于時間有限所以在這里我只提供一個該方法的頁面實現(xiàn)。當然你可以發(fā)揮你的才能作出更漂亮的。
問題描述：我們在使用dropdownlist的時候經(jīng)常會碰到這樣的問題（至少我碰到了），在一個很小的區(qū)域顯示一個比較復雜的內(nèi)容，希望讓選擇的人對要選擇的東西有比較清晰的認識，我們需要在點擊下拉框的時候可以顯示給用戶非常詳細的信息，可是由于布局的限制或者由于下拉框本身的限制，我們很難做到。
解決方案：我們希望有一個層來顯示一個豐富的內(nèi)容，既然是豐富的內(nèi)容，我們首先想到的應該是datagrid控件，那么好，我們就用datagrid和textbox以及button來實現(xiàn)該功能。
需要了解的知識：一點點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對象，同時可以固定表頭。（有關(guān)powerdatagrid請到www.foxhis.com/powermjtest/處下載）
固定表頭的datagrid的實現(xiàn)可以參考我的另一篇文章（http://www.csdn.net/develop/read_article.asp?id=25538）
上面是客戶端的表示，下面就是為了實現(xiàn)該效果而做的客戶端邏輯，該邏輯由3個js函數(shù)實現(xiàn)。代碼如下：
<script language="javascript">
// 顯示datagrid提供詳細內(nèi)容
function showdetail(txt,grd){
var datagridparent = document.getelementbyid('divparent');//首先找到datagrid的容器
var txtobj = document.getelementbyid(txt);//找到需要需要顯示選擇內(nèi)容的textbox
var datagrid = document.getelementbyid(grd);//找到datagrid呈現(xiàn)的客戶端表格
// 下面就是顯示datagrid和隱藏datagrid時候做的顯示開關(guān)
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;
}
// 當選擇表格中的行的時候?qū)⒏信d趣的內(nèi)容顯示到文本框中
// txt顯示內(nèi)容的目標控件,row用戶點擊的行對象，colid用戶要顯示的列的內(nèi)容
// 使用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綁定數(shù)據(jù)代碼，我們在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綁定數(shù)據(jù)的時候做點什么，下面是我們做的事情，代碼如下：
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
事件相應所要激發(fā)的函數(shù)。（tr是datagrid呈現(xiàn)在客戶端以后的行對象）
好了，到此我們的程序就寫完了。
對該工程有任何問題請發(fā)送郵件到[email protected]。如果您需要源代碼，您也可以發(fā)送郵件。
