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. I.MX6 AT24Cxx eeprom Linux i2c-gpio

    /************************************************************************** * I.MX6 AT24Cxx eeprom L ...

  2. 计算机网络——TCP/IP协议族详解

    一.OSI七层协议体系结构域TCP/IP四层体系结构对比 ISO/OSI模型,即开放式通信系统互联参考模型(Open System Interconnection Reference Model),是 ...

  3. 【转】Github轻松上手2-如何使用命令行创建和管理repo

    转自:http://blog.sina.com.cn/s/blog_4b55f6860100zzhd.html 如果你对这种怀旧的方式很感冒,不妨参考这里: http://help.github.co ...

  4. 锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件

    serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <hea ...

  5. Delphi 调用串口例子

    procedure TfrmClientMain.SayAddr;var sbuf:array[1..7] of byte;begin sbuf[1]:=byte($35); sbuf[2]:=byt ...

  6. centos7虚拟机无法上网的解决办法

    今天在VMware虚拟机中经过千辛万苦终于安装好了centos7..正兴致勃勃的例行yum update 却发现centos系统貌似默认网卡没配置好,反馈无法联网.经过一番研究,终于让centos连上 ...

  7. C++模板详解

    参考:C++ 模板详解(一) 模板:对类型进行参数化的工具:通常有两种形式: 函数模板:仅参数类型不同: 类模板:   仅数据成员和成员函数类型不同. 目的:让程序员编写与类型无关的代码. 注意:模板 ...

  8. 学习Python必须要知道的常用模块

    在程序设计中,为完成某一功能所需的一段程序或子程序:或指能由编译程序.装配程序等处理的独立程序单位:或指大型软件系统的一部分.本文为你介绍了Python中的两种常用模块. os: 这个模块包含普遍的操 ...

  9. DOM笔记（八）：JavaScript执行环境和垃圾收集

    一.执行环境 在有关于JavaScript对象或者this的指向问题时,脱离不了的另外一个概念就是执行环境,即上下文环境.执行环境在JavaScript是一个 很重要的概念,因为它定义了变量或函数有权 ...

  10. ASP.NET MVC3 系列教程 - 部署你的WEB应用到IIS 6.0

    I:ASP.NET MVC3 部署的前期工作 1.确认部署的服务器操作系统环境 首先我们确认服务器的操作系统版本 可以从系统命令行工具里输入: systeminfo 获取相关操作系统信息例如 然后再确 ...