Tips/Tricks#3:利用JavaScript选择GridView行
利用JavaScript选择GridView行
本篇技巧和诀窍记录的是:利用JavaScript选择GridView行。
当我们想在GridView中添加删除、选择功能时,我们通常的做法是利用模板功能在每行添加一个按钮控件或者超链接按钮控件,单击按钮利用RowCommand获取每行的ID。
下面我们利用JavaScript完成这一功能。
我们可以通过调用JavaScirpt函数改变单击的行的背景颜色来模拟选择的行,这里需要声明一个隐藏字段,从JS中获得选取GridView行的ID。在选择/删除事件中,可以从隐藏字段中得到选择行的ID,完成一些需要功能。
第一步:在页面中添加GridView控件和一个按钮,隐藏字段
<input id="hdnEmailID" type="hidden" value="0" runat="server" name="hdnEmailID" /> <asp:GridView ID="gvUsers" runat="server" AutoGenerateColumns="False" OnRowDataBound="gvUsers_RowDataBound"><Columns><asp:BoundField DataField="Email" HeaderText="邮件" ReadOnly="True" /><asp:BoundField DataField="Name" HeaderText="姓名" ReadOnly="True" /></Columns> </asp:GridView> <asp:Button ID="btnSelect" runat="server" OnClick="btnSelect_Click" Text="Select" />
第二步:编写JS函数来获取选择行的id,并改变背景颜色
<script language="javascript" type="text/javascript">var lastRowSelected;var originalColor;function GridView_selectRow(row, EmailID){ var hdn=document.form1.hdnEmailID;hdn.value = EmailID;if (lastRowSelected != row){if (lastRowSelected != null){lastRowSelected.style.backgroundColor = originalColor;lastRowSelected.style.color = 'Black'lastRowSelected.style.fontWeight = 'normal';}originalColor = row.style.backgroundColorrow.style.backgroundColor = 'BLACK'row.style.color = 'White'row.style.fontWeight = 'normal'lastRowSelected = row;}}function GridView_mouseHover(row){row.style.cursor = 'hand';} </script>
略过一步,就是绑定数据,大家自行完成。
第三步:在RowDataBound事件中添加JS函数调用。
protected void gvUsers_RowDataBound(object sender, GridViewRowEventArgs e) {if (e.Row.RowType == DataControlRowType.DataRow){e.Row.ID = e.Row.Cells[0].Text;e.Row.Attributes.Add("onclick", "GridView_selectRow(this,'" + e.Row.Cells[0].Text + "')");e.Row.Attributes.Add("onmouseover", "GridView_mouseHover(this)");} }
第四步:完成按钮事件
在选择/删除按钮单击事件我们可以用hdnEmailID.Value方式获得行的id。然后利用id来完成操作;这里为了演示,我只是输出了这个值。
protected void btnSelect_Click(object sender, EventArgs e) {Response.Write(hdnEmailID.Value); }
好了,这个技巧就介绍到这里了,大家试一试!
转载于:https://www.cnblogs.com/lyj/archive/2008/05/10/1191275.html
Tips/Tricks#3:利用JavaScript选择GridView行相关推荐
- 利用JavaScript选择GridView行
当我们想在GridView中添加删除.选择功能时,我们通常的做法是利用模板功能在每行添加一个按钮控件或者超链接按钮控件,单击按钮利用RowCommand获取每行的ID. 下面我们利用JavaScrip ...
- 使用JavaScript选择GridView行的方法汇总
一行: e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(this.gvUsers, &q ...
- 转:45 Useful JavaScript Tips, Tricks and Best Practices
原文来自于:http://flippinawesome.org/2013/12/23/45-useful-javascript-tips-tricks-and-best-practices/ 1 – ...
- 拥抱RxJava(番外篇):关于RxJava的Tips Tricks
前言: 起初写 拥抱RxJava 系列文章.只是因为看到很多人在使用RxJava时候,并没有很正确的理解Reactive Programming.仅仅在项目中使用了Retrofit的Rx Adapte ...
- linux下运行js挖矿,利用 JavaScript 代码挖矿
我们都知道,现在的比特币特别的火,但是错过了最好时代的我们,已经玩不起那个动不动就几万的矿机以及还需要翻山越岭迁移到深山发电站的决心.何况,目前比特币已经不再是如同神话一般的不断开创历史新高,该来的矿 ...
- 利用javascript和WebGL绘制地球 【翻译】
利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...
- EL之RF(随机性的Bagging+DTR):利用随机选择属性的bagging方法解决回归(对多变量的数据集+实数值评分预测)问题
EL之RF(随机性的Bagging+DTR):利用随机选择属性的bagging方法解决回归(对多变量的数据集+实数值评分预测)问题 目录 输出结果 设计思路 核心代码 输出结果 设计思路 核心代码 f ...
- 利用JavaScript在ASP.NET中动态生成系统菜单
用户在登陆一个系统后通常会因为权限的不同而使用不同的系统功能,我们在实现用户使用的菜单项时有两种选择,一是列出全部系统菜单项,根据用户的权限禁用一部分菜单,二是根据权限动态加载菜单,这样只要列出的 ...
- 转:26个Jquery使用小技巧(jQuery tips, tricks solutions)
26个Jquery使用小技巧(jQuery tips, tricks & solutions) 前段时间发布了Jquery类库1.4版本,使用者也越来越多,为了方便大家对Jquery的使用,下 ...
最新文章
- Web服务的体系架构
- 广州站 | 云原生 Serverless 技术实践营精彩回顾
- C/C++信息隐写术(二)之字符串藏入BMP文件
- 解决办法:对BZ2_bzDecompressInit/BZ2_bzDecompress/BZ2_bzDecompressEnd未定义的引用
- express在本地起一个简单服务器可能会用到的(本文用的uniapp做例子)
- 2018年度最佳网页设计与开发教程
- 鳄鱼mt4复盘助手_免费MT4复盘助手2015年8月新版
- MOOC 研究生学术与职业素养 课后答案
- BUUCTF WEB easyweb
- 《Android移动应用基础教程》之川菜菜谱
- java wps linux 安装_安装wps for linux无法启动
- 艾奇android视频格式转换器,艾奇全能视频格式转换器
- 2022年最简单旋转PDF页面的方法推荐
- instagram分享_存档instagram帐户正在教被忘记的历史
- 基于NRF24L01的CAN数据透传
- 白苹果了怎么办_iOS 13如何降级?iOS13降级失败怎么办?
- 程序员如何有效率的使用键盘
- 2019电赛纸张计数仪分析——————致敬“谢谢惠顾”
- 刘润对谈吴军:给腾讯和所有上进企业的4点建议
- 朋友可以分成三大类 对付虚伪的人3招
热门文章
- linux开源开发板 软硬件资料,LeMaker Guitar开源开发板安装系统镜像、Linux 系统快速指南 | 乐美客开源开发板社区...
- 怎么烧录c语言_单的入门1 -- C语言 : 一门和芯片对话的外语
- 大学计算机专业挂科人多吗,这几个专业真的是太难了,挂科率年年都是新高,很多人都后悔了...
- 在 vCenter Server 中触发了 vSphere Distributed Switch 绑定警报 (2057667)
- VCSA6.7 备份和还原
- 5月22日晚间,阿里巴巴集团发布2020财年业绩……
- 华为云-云容器引擎 CCE新功能发布动态
- vSAN其实很简单-5分钟学会如何向VMware报修故障(内含福利)
- Java设计模式学习总结(4)——创建型模式之单例模式
- Java基础学习总结(97)——合格的Java的架构师需要具备的技术知识