利用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.backgroundColor
  row.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);

  }好了,这个技巧就介绍到这里了,大家试一试!



本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/archive/2011/05/07/2039927.html,如需转载请自行联系原作者

目录
相关文章
|
JavaScript 前端开发 安全
80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印
80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印 1. 信息标识: 水印可以用于标识文档的所有者、保密级别、状态或其他相关信息,帮助用户更好地理解文档内容的属性。 2. 版权保护: 在文档中添加水印可以帮助保护内容的版权,防止他人未经授权地复制、转载或篡改内容。 3. 安全保护: 对于敏感信息或机密文档,添加水印可以帮助防止信息泄露,提高文档的安全性。 4. 提升专业性: 在一些场景下,如商业报告、合同文件等,添加水印可以增加文档的专业性和正式性。 5. 防止截屏或拷贝: 在网页中添加水印可以防止用户通过截屏或复制粘贴等方式非法获取文档内容。
310 1
80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印
|
JavaScript
js 选取table中checkbox选中行的某一列
js 选取table中checkbox选中行的某一列
290 0
|
JSON JavaScript 前端开发
JS案例:如何用300行原生js代码写出高大上的购物车
JS案例:如何用300行原生js代码写出高大上的购物车
392 0
JS案例:如何用300行原生js代码写出高大上的购物车
|
前端开发 JavaScript
前端:js根据CheckBox获得选中行的具体某些列内容(批量操作传多条数据)
前端:js根据CheckBox获得选中行的具体某些列内容(批量操作传多条数据)
230 0
|
前端开发 JavaScript
【70行JavaScript代码实现除夕夜倒计时 零基础也能学会~
70行代码实现除夕夜倒计时 零基础也能会
351 0
【70行JavaScript代码实现除夕夜倒计时 零基础也能学会~
|
自然语言处理 JavaScript 前端开发
【图文详解】200行JS代码,带你实现代码编译器(人人都能学会) 下
【图文详解】200行JS代码,带你实现代码编译器(人人都能学会) 下
230 0
|
自然语言处理 JavaScript 前端开发
【图文详解】200行JS代码,带你实现代码编译器(人人都能学会) 上
【图文详解】200行JS代码,带你实现代码编译器(人人都能学会) 上
421 0
|
自然语言处理 前端开发 JavaScript
用25行JavaScript语句实现一个简单的编译器
用25行JavaScript语句实现一个简单的编译器
183 0
|
机器学习/深度学习 JavaScript 前端开发
微软行星云计算Planetary Computer——定了用python作为主要语言,告别GEE的JavaScript痛苦!
微软行星云计算Planetary Computer——定了用python作为主要语言,告别GEE的JavaScript痛苦!
508 0
微软行星云计算Planetary Computer——定了用python作为主要语言,告别GEE的JavaScript痛苦!
|
JavaScript 前端开发
使用 JavaScript 用循环嵌套输出乘法表。外循环控制行数,内循环控制当前行要输出的乘法表达式,在页面上输出九九乘法表
使用 JavaScript 用循环嵌套输出乘法表。外循环控制行数,内循环控制当前行要输出的乘法表达式,在页面上输出九九乘法表
162 0