在js中取得gridView某行某列的值

最新推荐文章于 2022-10-20 14:35:49 发布

最新推荐文章于 2022-10-20 14:35:49 发布 · 276 阅读

文章标签：

本文介绍了一个使用ASP.NET实现的GridView控件，该控件支持全选及单行修改功能。通过JavaScript实现了全选逻辑，并提供了两种方式来获取选中行的数据以进行后续操作。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="gridViewSelectAll.aspx.cs" Inherits="bindData.gridViewSelectAll" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script language="javascript" type="text/javascript"> //全选 function checkAll() { var checkBox = document.getElementsByTagName("input"); for (var i = 0; i < checkBox.length; i++) { if (checkBox[i].type == "checkbox") { checkBox[i].checked = document.all.cb_title.checked; } } } //修改 function editRow() { var checkCount = 0; var id = ""; var gridView = document.getElementById("gridView_dataSet"); var checkBox = document.getElementsByName("checkBox"); //取得gridView中所有的checkBox for (var i = 0; i < checkBox.length; i++) { if (checkBox[i].type == "checkbox") { if (checkBox[i].checked == true) { id = gridView.rows[i + 1].cells[1].innerHTML; //取得gridView中某行的id checkCount++; } } } if (checkCount != 1) { alert("请选择一项进行修改！"); } else { alert("id=" + id); } } function editRow1() { var id = ""; var count = 0; var gridView = document.getElementById("gridView_dataSet"); for (i = 1; i < gridView.rows.length; i++) { var cb = gridView.rows(i).cells(0).children(0); if (cb.checked) { count++; id = gridView.rows(i).cells(1).innerText; } } if (count != 1) { alert("请选择一项进行修改！"); } else { alert("id=" + id); } } </script> </head> <body> <form id="form1" runat="server"> <div> <input type="button" value="选择一项" onclick="editRow();" /> <input type="button" id="btn_edit" value="修改" onclick="editRow1();" /> <asp:GridView ID="gridView_dataSet" runat="server"> <Columns> <asp:TemplateField> <HeaderTemplate> <input type="checkbox" id="cb_title" onclick="checkAll();"> </HeaderTemplate> <ItemTemplate> <input type="checkbox" id="cb_item" name="checkBox" /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </div> </form> </body> </html>

后台：

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; namespace bindData { public partial class gridViewSelectAll : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { bindData(); } } /// <summary> /// 设置数据 /// </summary> /// <returns></returns> private DataSet setData() { DataSet ds = new DataSet();//注：必须要new，否则会是未将对象设置到实例 DataTable dt = new DataTable();//设置表 DataColumn dc = null;//设置列 dc = dt.Columns.Add("id", typeof(string)); dc = dt.Columns.Add("goodsName", typeof(string)); dc = dt.Columns.Add("price", typeof(string)); dc = dt.Columns.Add("number", typeof(int)); dc = dt.Columns.Add("buyTime", typeof(DateTime)); dc = dt.Columns.Add("fresh", typeof(int)); DataRow dr = null;//设置行 dr = dt.Rows.Add("1", "a", 1.3, 1, "2005-10-2", 1); dr = dt.Rows.Add("tt", "b", 0.5, 2, "2005-10-2", 0); dr = dt.Rows.Add("3", "c", 1.5, 3, "2005-10-2", 1); dr = dt.Rows.Add("4", "d", 0.2, 4, "2005-10-2", 0); dr = dt.Rows.Add("5", "e", 0.2, 5, "2005-10-2", 0); dr = dt.Rows.Add("6", "f", 1.6, 6, "2005-10-2", 1); dr = dt.Rows.Add("g", "g", 0.3, 7, "2005-10-2", 0); dr = dt.Rows.Add("7", "g", 0.3, 7, "2005-10-2", 0); dr = dt.Rows.Add("g", "g", 0.3, 7, "2005-10-2", 0); dr = dt.Rows.Add("t", "g", 0.3, 7, "2005-10-2", 0); ds.Tables.Add(dt); return ds; } /// <summary> /// 绑定数据源 /// </summary> private void bindData() { gridView_dataSet.DataSource = setData(); gridView_dataSet.DataBind(); } } }