JQuery是一种非常强大的客户端JS编程技术，这里不想过多阐述它的相关背景知识，只想简单演示一下如何与asp.net的控件结合开发。

比如，我们要做一个下面如图所示的功能，效果是状态、编号、数字1、数字2、平均值所有的项都是通过后台绑定，如何点击checkbox按钮，来实现自动计算当前行两个数字的平均值呢？前提是用JQuery来实现？

我们直接在页面的Page_Load事件中输入如下代码：

        protected void Page_Load(object sender, EventArgs e)

        {

            if (!Page.IsPostBack)

            {

                DataTable dt = new DataTable();

                dt.Columns.AddRange(new DataColumn[] {

                    new DataColumn("id",typeof(Int32)),

                    new DataColumn("num1",typeof(Int32)),

                    new DataColumn("num2",typeof(Int32))

                });

                DataRow dr = null;

                dr = dt.NewRow();

                dr["id"] = 1;

                dr["num1"] = 20;

                dr["num2"] = 40;

                dt.Rows.Add(dr);

                dr = dt.NewRow();

                dr["id"] = 2;

                dr["num1"] = 40;

                dr["num2"] = 30;

                dt.Rows.Add(dr);

                this.GridView1.DataSource = dt.DefaultView;

                this.GridView1.DataBind();

            }

        }

前台页面body部分：

<body>

    <form id="form1" runat="server">

        <div>

            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">

                <Columns>

                    <asp:TemplateField HeaderText="状态">

                        <ItemTemplate>

                            <asp:CheckBox ID="checkstate" runat="server" />

                        </ItemTemplate>

                    </asp:TemplateField>

                    <asp:TemplateField HeaderText="编号">

                        <ItemTemplate>

                            <asp:Label ID="lblId" runat="server"> <%#Eval("id") %></asp:Label>

                        </ItemTemplate>

                    </asp:TemplateField>

                    <asp:TemplateField HeaderText="数字1">

                        <ItemTemplate>

                            <asp:Label ID="lblNum1" runat="server"> <%#Eval("num1") %></asp:Label>

                        </ItemTemplate>

                    </asp:TemplateField>

                    <asp:TemplateField HeaderText="数字2">

                        <ItemTemplate>

                            <asp:Label ID="lblNum2" runat="server"> <%#Eval("num2") %></asp:Label>

                        </ItemTemplate>

                    </asp:TemplateField>

                    <asp:TemplateField HeaderText="平均值">

                        <ItemTemplate>

                            <asp:TextBox ID="avg_value" runat="server" />

                        </ItemTemplate>

                    </asp:TemplateField>

                </Columns>

            </asp:GridView>

        </div>

    </form>

</body>

关键的在页面的head部分，输入如下代码就可以实现如图效果了。

    <script src="js/jquery-1.4.2.js"></script>

    <script type="text/javascript">

        $(function () {

            $("#<%=GridView1.ClientID%>").find("tr td input[type=checkbox]").each(function () {

                $(this).bind("click", function () {

                    if (this.checked) {

                        var id = $(this).parent().parent().find("span[id*=lblId]").text();

                        var num1 = $(this).parent().parent().find("span[id*=lblNum1]").text();

                        var num2 = $(this).parent().parent().find("span[id*=lblNum2]").text();

                        var result = (parseFloat(num1) + parseFloat(num2)) / 2;

                        $(this).parent().parent().find("input[id*=avg_value]").val(result);

                    } else {

                        $(this).parent().parent().find("input[id*=avg_value]").val("");

                    }

                });

            });

        });

    </script>

你会发现JQuery的代码读着很轻松，很容易理解。而且代码也很优美，最关键的是兼容性很好。

再附一个简单点的例子，这是一个静态html页面，看JQuery是如何发挥威力的。效果是点击每一行的按钮时，弹出当前行的text里面的value。

<html>

<head>

<script type="text/javascript" src="jquery-1.4.2.js"></script>

  <script type="text/javascript">

		$(function(){

			$("table tr td").each(function(){

				$(this).find("[type=button]").click(function(){

					alert($(this).parent().parent().find("[type=text]").val());

				});

			});

		});

  </script>

</head>

<body>

<table>

  <tr>

   <td>1</td>

   <td><input type=text  value="数据1" /></td>

   <td><input type=button  onclick="GetTest()" value="获取" /></td>

  </tr>

  <tr>

   <td>2</td>

   <td><input type=text  value="数据2" /></td>

   <td><input type=button  onclick="GetTest()" value="获取" /></td>

  </tr>

</table>

</body>

</html>

试想，如果我们用js去做，将会很麻烦，而且还要考虑各种浏览器的兼容性。看到这里不得不感叹一句，JQuery虽然短小，但是相当强大啊。

JQuery与GridView控件结合示例的更多相关文章

  1. jQuery找到GridView控件ItemTemplate模版内的控件

    可以使用下面的方法,jQuery找到GridView控件ItemTemplate模版内的CheckBox: 使用jQuery的find()方法:

  2. 模仿win10样式，基于jquery的时间控件

    工作需要,写了一个基于jquery的时间控件,仿win10系统时间控件格式. 目前基本功能都有了,但时间格式只实现少数,但由于结构设计已经充分优化,填充起来非常容易. 这个控件相对网上其他的时间控件, ...

  3. 扩展GridView控件——为内容项添加拖放及分组功能

    引言 相信大家对GridView都不陌生,是非常有用的控件,用于平铺有序的显示多个内容项.打开任何WinRT应用或者是微软合作商的网站,都会在APP中发现GridView的使用.“Tiles”提供了一 ...

  4. 027. asp.net中数据绑定控件之 GridView控件

    GridView控件支持下面的功能: 绑定至数据源控件, 如SqlDataSource 内置排序功能 内置更新和删除功能 内置分页功能 内置行选择功能 可以编程方式访问GridView对象模型以动态设 ...

  5. 在GridView控件内文本框实现TextChanged事件

    本篇是教你实现GridView控件内的TextBox文本框实现自身的TextChanged事件.由于某些功能的需求,GridView控件内嵌TextBox,当TextBox值发生变化时,触发TextC ...

  6. 点击CheckBox让Gridview控件在编辑与正常状态之间切换

    昨晚快休息时,还有一位网友咨询Insus.NET,他想在开发时,实现一个小功能,就是想让用户在点击Gridview控件第一列的CheckBox之后,GridView进入编辑状态,取消选中的CheckB ...

  7. 一些基于jQuery开发的控件

    基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-a ...

  8. jquery操作select2控件

    (一)select2常用的操作:添加.移除.获取选中的value()与text() (1)移除事件:$("#select_id").unbind("change" ...

  9. jquery 双向select控件bootstrap Dual listbox

    http://www.cnblogs.com/hangwei/p/5040866.html       -->jquery 双向select控件bootstrap Dual listboxhtt ...

随机推荐

  1. zoo.cfg配置

    zookeeper的默认配置文件为zookeeper/conf/zoo_sample.cfg,需要将其修改为zoo.cfg.其中各配置项的含义,解释如下: 1.tickTime:CS通信心跳时间 Zo ...

  2. iOS基础CGAffineTransform的简单使用

    CoreGraphics框架中的CGAffineTransform类可用于设定UIView的transform属性,控制视图的缩放.旋转和平移操作: 另称放射变换矩阵,可参照线性代数的矩阵实现方式0. ...

  3. python执行mysqldump命令

    本文简单讲述如何利用python执行一些sql语句,例如执行mysqldump命令,进行数据库备份,备份成sql文件 #!/usr/bin/python#导入os模块import os#导入时间模块i ...

  4. tableView的设置

    TableView的设置 1.设置table头部和底部的view // 底部(宽度固定是320) tableView.tableFooterView = footer; // 头部(宽度固定是320) ...

  5. IOS中UISearchBar的使用

    1.搜索框的代理(delegate)方法 #pragma mark 监听搜索框的文字改变 - (void)searchBar:(UISearchBar *)searchBar textDidChang ...

  6. 2015-10-14 晴 tcp/ip

    今天看完ping, traceroute, ip选路,动态选路协议,dup, igmp, tftp, bootp,tcp

  7. JSTL标签用法 详解

    在JSP的开发中,迭代是经常要使用到的操作.例如,逐行的显示查询的结果等.在早期的JSP中,通常使用Scriptlets来实现Iterator或者Enumeration对象的迭代输出.现在,通过JST ...

  8. js函数内嵌函数的整体跳出 .

    stop=false; $.ajax({success:function(){ 这里面不能用return false跳出整个<script></script>,只能跳出该处的f ...

  9. $(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法

    $(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法接触JQuery一般最先学到的是何时启动事件.在曾经很长一段时间里,在页面载入后引发的事件 ...

  10. testng之listener

    这周在给人培训selenium+testng框架时,讲到listener这块发现对listener并没有完全了解,于是自己又重新学习了下. 以下是 TestNG 提供的几种监听器: IAnnotati ...