如何实现可以带详细表格的DropDownList

原创 2004年10月30日 15:57:00
作者:cuike519的专栏   http://blog.csdn.net/cuike519/
 本文详细介绍了如何实现在点击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呈现在客户端以后的行对象)
        好了,到此我们的程序就写完了。
        对该工程有任何问题请发送邮件到wu_jian830@hotmail.com。如果您需要源代码,您也可以发送邮件。

祝:工作顺利!

版权声明:本文为博主原创文章,未经博主允许不得转载。

如何实现可以带详细表格的DropDownList

本文详细介绍了如何实现在点击DropDownList的时候弹出DataGrid,然后从DataGrid里面选择相应的项。       很早就发现在网上有很酷的下拉选择框,今天我在这里也写一个,该方法旨...
  • piscailei
  • piscailei
  • 2007年05月18日 16:47
  • 308

如何实现可以带详细表格的DropDownList

本文详细介绍了如何实现在点击DropDownList的时候弹出DataGrid,然后从DataGrid里面选择相应的项。 很早就发现在网上有很酷的下拉选择框,今天我在这里也写一个,该方法旨在说明问题的...
  • qizhenggang
  • qizhenggang
  • 2006年08月30日 09:50
  • 522

如何实现可以带详细表格的DropDownList

本文详细介绍了如何实现在点击DropDownList的时候弹出DataGrid,然后从DataGrid里面选择相应的项。 很早就发现在网上有很酷的下拉选择框,今天我在这里也写一个,该方法旨在说明问题的...
  • jelink
  • jelink
  • 2006年08月25日 12:52
  • 765

如何实现可以带详细表格的DropDownList

本文详细介绍了如何实现在点击DropDownList的时候弹出DataGrid,然后从DataGrid里面选择相应的项。 很早就发现在网上有很酷的下拉选择框,今天我在这里也写一个,该方法旨在说明问题的...
  • web718
  • web718
  • 2005年06月16日 10:34
  • 806

ASP.NET中如何让DropDownList控件既能做选择又能做输入用?

     .cls1  {  position:absolute;  left:250px;  top:89px;  width:216px;  height:72px;  z-index:1;  ...
  • wxpisp
  • wxpisp
  • 2006年04月26日 01:58
  • 574

DropDownList实现多选功能

x
  • tanxd137
  • tanxd137
  • 2011年07月14日 14:32
  • 3060

Select-DropDownList通过Javascript实现模糊搜索

html                                                                                            ...
  • ruanruoshi
  • ruanruoshi
  • 2017年11月14日 19:30
  • 139

请问如何设置DropDownList的当前选项?

问:请问一下在asp.net中的DropDownList绑定到一个数据表后,怎么设置他其中的一个项目为已选项啊?不要叫我用SelectedIndex来设置第几的个,我只能知道要设置已选的那个项目的值,...
  • lee576
  • lee576
  • 2008年01月09日 20:31
  • 1472

可输入的DropDownList扩展控件(C#)

首先,建立一个名字为ExtendWebControls的C#用户自定义Web控件的工程        然后,添加一个DropDownList.cs文件,类型为Web自定义控件        添加如下代...
  • JOHNCOOLS
  • JOHNCOOLS
  • 2006年02月19日 14:01
  • 1787

可输入的下拉框(DropDownList)

 1 新建ascx用户控件 @ Control Language="C#" AutoEventWireup="true" CodeFile="EditableSelect.ascx.cs" Inher...
  • longronglin
  • longronglin
  • 2007年05月25日 20:23
  • 4981
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何实现可以带详细表格的DropDownList
举报原因:
原因补充:

(最多只允许输入30个字)