如何实现可以带详细表格的DropDownList
作者: 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" οnclick="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相关推荐
- 史上最详细阿里云服务器上Docker部署War包项目 实战每一步都带详细图解!!!
史上最详细阿里云服务器上Docker部署War包项目 实战每一步都带详细图解!!! 部署jar 包方式: https://blog.csdn.net/weixin_45821811/article/d ...
- C语言答案解析,C语言题库带详细讲解答案解析.doc
C语言题库带详细讲解答案解析.doc 下载提示(请认真阅读)1.请仔细阅读文档,确保文档完整性,对于不预览.不比对内容而直接下载带来的问题本站不予受理. 2.下载的文档,不会出现我们的网址水印. 3. ...
- HTML5+CSS期末大作业:明星主页网站设计—— 鹿晗明星(7页)带留言带音乐表格 HTML+CSS+JavaScript 学生dreamweaver网页设计作业成品
HTML5期末大作业:明星主页网站设计-- 鹿晗明星(7页)带留言带音乐表格 HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 大学生 ...
- linux下最简单多线程单文件socks5代理proxy服务器程序(仅一个c文件,带详细注解)
2020.9.11 网上看的都比较复杂,GITHUB找了一个多线程的相对简单的MicroSocks项目,花了几周时间(没办法,菜鸟一个)改了一下,改成单文件,测试OK. /* wxl_socks5_p ...
- 静态HTML网页设计作品 HTML5+CSS大作业——明星个人-赵丽颖(7页)带表单带音乐表格布局
HTML5+CSS大作业--明星个人-赵丽颖(7页)带表单带音乐表格布局 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. ...
- python神经网络编程pdf_[人工智能]Python神经网络编程(高清,带详细书签) pdf文件[11.49MB]-码姐姐下载...
Python神经网络编程(高清,带详细书签) [更多关于<深度学习>资料,加qq群:851916415领取!] 本书首先从简单的思路着手,详细介绍了理解神经网络如何工作所必须的基础知识.第 ...
- HTML5+CSS大作业——明星个人-赵丽颖(7页)带表单带音乐表格布局
HTML5+CSS大作业--明星个人-赵丽颖(7页)带表单带音乐表格布局 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. ...
- 阿里巴巴java方向笔试题 带详细答案
阿里巴巴java方向笔试题 带详细答案 1,下列说法正确的是() A.一个文件里可以同时存在两个public修饰的类 B.构造函数可以被重写(override) C.子类不能访问父类非public和p ...
- Vue3 - Element plus 实现 “带分页“ 表格组件,实现跨页进行 “分页勾选“ 的多选功能(解决分页表格组件 <el-table> 跨页后已前勾选的行自动消失问题)详细示例解决教程
前言 在 Vue3 项目中,使用 Element Plus 组件库的表格组件时,出现了跨页勾选复选框消失的问题. 本文实现了 vue3 中 element plus 表格组件 <el-table ...
最新文章
- postgresql开发中可能有用的知识
- 微软曾经的二号人物永远地离开了
- boost::hana::detail::unpack_flatten用法的测试程序
- 使用YouTube API V3视频的完整描述- Google YouTube API V3 - Get Video Durations
- 2个维度5大方法,让你的微服务在K8s上跑起来
- HDU 4825:Print Article(01字典树)
- Oracle密码过期处理
- 洛谷P1141 01迷宫【bfs】
- 向日葵linux版远程怎么打开,使用向日葵app远程控制你的Mac笔记本 之小白使用指导...
- RFID定位技术下的智能养老系统具有哪些优势呢?--新导智能
- DGPS与RTK的区别
- SDK数据采集抓取精准主要
- 只会环比下降3%的数据分析师还有救吗?
- ENFJ型的人:什么样的人很适合人工智能方向
- Alist+RaiDrive将你的云盘本地化
- 这5个PHP编程中的不良习惯,一定要改掉!
- Python 查看显存大小
- vi/vim中复制粘贴命令
- 计算机网络组建毕业论文,网络组建毕业论文范文
- Flare-On Challenge4 Writeup
热门文章
- linux 压缩文件夹格式,Linux下常见文件格式的压缩、解压小结
- Ubuntu安装TensorFlow-gpu及cuda9.0(不给自己找麻烦)
- OpenCV(二)逐像素的图像复制、图像边缘检测(自实现和API实现)
- STL nth_element
- 【转载】Git 常用命令大全
- 为ThinkPad T420增加一根4G内存
- 在Uubuntu 14.04 64bit上搭建NumPy函数库环境
- 使用valgrind检测ATS插件中的内存泄露
- UE4场景设计学习教程
- 藤本植物和攀爬植物模型包 Globe Plants – Bundle 23 – Vines and Creepers 03 (3D Models)