|
本文详细介绍了如何实现在点击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如果您需要源代码您也可以发送邮件 |
