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. bzoj3668: [Noi2014]起床困难综合症

    从高位到低位枚举期望的应该是ans最高位尽量取一.如果该数最高位为o的话能够取得1直接更新ans否则判断该位取1是否会爆m不会的话就加上. #include<cstdio> #includ ...

  2. 二：ZooKeeper术语概念

    一:Zookeeper的设计目标   -->Zookeeper致力于提供一个高性能,高可用,且具有严格的顺序访问控制能力(主要是写操作的严格顺行性)的分布式协调服务. -->高性能使得Zo ...

  3. qq互联登陆开发流程

    宋正河整理 百度文库在线观看: http://wenku.baidu.com/view/96da9744e518964bcf847c47.html?st=1 csdn免积分下载: http://dow ...

  4. 二叉树的基本操作（C）

    实现二叉树的创建(先序).递归及非递归的先.中.后序遍历 请按先序遍历输入二叉树元素(每个结点一个字符,空结点为'='): ABD==E==CF==G== 先序递归遍历: A B D E C F G ...

  5. MySQL_PHP学习笔记_2015_0614_PHP传参总结_URL传参_表单传参

    1. PHP 传参总结   1.1 url 传参     解析方法(下面两种解读方式均可以): $firstName1 = $_GET['firstName']; $firstName2 = $_RE ...

  6. <System.ServiceModel>

    實例: <system.serviceModel>    <diagnostics performanceCounters="All" />    < ...

  7. webservice注释

    @WebService 1.serviceName: 对外发布的服务名,指定 Web Service 的服务名称:wsdl:service.缺省值为 Java 类的简单名称 + Service.(字符 ...

  8. 【转】Struts2中的MethodFilterInterceptor(转)

    这是一个Struts2.1.8.1应用,代码如下 首先是web.xml文件 view plaincopy to clipboardprint?01.<?xml version="1.0 ...

  9. golang实现ios推送

    生成pem文件 打开Keychain Access 导出推送证书和私钥 推送证书 cert.p12 私钥 key.p12 导出.pem文件 转换推送证书 openssl pkcs12 -clcerts ...

  10. 配置使VirtualBox下的linux可以宿主机互访并上网

    1. 设置VirtualBox,选择桥接网卡 2. 配置linux的ifcfg-eth0 配置完成后,用service network restart重启网络. 3. 然后查后路由配置是否正确 如果没 ...