如何实现可以带详细表格的dropDownList
2024-07-21 02:25:42
供稿：网友
本文详细介绍了如何实现在点击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呈现在客户端以后的行对象）
好了，到此我们的程序就写完了。
对该工程有任何问题请发送邮件到[email protected]。如果您需要源代码，您也可以发送邮件。
