JS获得ASP.NET(C#)页面上GridView选中行的信息

做web开发还是新手的我,之前为了得到Gridview中的值,是将其通过服务端控件先将Gridview中的数据保存到服务端,然后绑定当一个服务端的隐藏域,之后通过js读取隐藏域中的值,现在感觉这种方法很笨;虽然得到数据是很容易的仅仅是遍历一下Gridview,但是考虑的性能,我还是想用js来读取。现在可以得到我想要的数据了,为了方便以后和我一样的新手,现在简单记下,希望能够抛砖引玉,有待找到更好的解决办法。如果您有更好的想法请联系qq:643166601,我会及时记录更新。

1.准备数据库,我的数据库名字叫做LionDB,下面有一个表叫做User,如下:

JS获得ASP.NET(C#)页面上GridView选中行的信息

User表的定义,如下:

JS获得ASP.NET(C#)页面上GridView选中行的信息

User表中的数据,如下:

JS获得ASP.NET(C#)页面上GridView选中行的信息


2.页面上放两个控件 

a) GridView,绑定数据源,添加checkbox列,其他列自动绑定

b) Input(Button) ,添加事件(为以后得具体哪一行或那几行数据做准备)

之后,页面效果如下:

JS获得ASP.NET(C#)页面上GridView选中行的信息


4.js关键代码

    <script language="javascript" type="text/javascript">
// <![CDATA[

        function btnChecked_onclick() {

            var tb = document.getElementById("<%=GridView1.ClientID %>"); 
            var sLine = "";
            if (tb) {
                var rows = tb.rows;
                for (var i = 1; i < rows.length; i++) {
                    var cbx = rows[i].cells[0].childNodes[0].nextElementSibling;
                    if (cbx.type == 'checkbox' && cbx.checked == true) {
                        var sUserId = rows[i].cells[1].innerHTML;
                        var sUserName = rows[i].cells[2].innerHTML;
                        sLine += "userId:" + sUserId + "userName:" + sUserName + " ";
                    }
                }
          alert(sLine);
            }
        }
// ]]>
    </script>

5.运行效果

JS获得ASP.NET(C#)页面上GridView选中行的信息


6.得到想要的结果

JS获得ASP.NET(C#)页面上GridView选中行的信息


源码包:

点击打开链接




JS获得ASP.NET(C#)页面上GridView选中行的信息,布布扣,bubuko.com

JS获得ASP.NET(C#)页面上GridView选中行的信息

上一篇:最好用的jquery列表拖动排列(由项目提取)


下一篇:快速排序(js版本)