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. Strongly connected 挺简单的tarjan

    题意:给你一个连通图,问你最多加多少条边,还能保证该图不是强连通图. 对整个图求强连通分量,然后对图缩点,记录一下缩点之后每隔点包含的原来的点的个数,找出最少的那个点,然后对这个点建成完全图,对另外的 ...

  2. xxx_cast类型转换

    xxx_cast是一个统称,它指的是static_cast(静态转换),const_cast(常量转换),reinterpert_cast(重解释转换),dynamic_cast(动态转换).本次我们 ...

  3. 简单使用Junit

    不需要配置,导入相应jar,然后在测试的方法上面加入注解@Test 执行的时候选择junit即可.

  4. MAC OSX 下安装 CTAGS

    由于本子跟风换了骚货MBP,因而开发要迁移到MAC OSX下,mac os 下的ctags不一样,所以需要自己编译一个   Lion内置了ctags,但是不我所需要,因此得在网上去弄,最新的版本是 5 ...

  5. Java核心技术II读书笔记（一）

    Char2 XML 解析器:读入一个文件,确认其具有正确的格式,然后将其分解成各种元素,使程序员能够访问这些元素. java库提供了两种XML解析器:DOM和SAX,即文档对象模型和流机制解析器. D ...

  6. 【转】Ubuntu 12.04 安装JDK 8和Eclipse

    原文网址:http://blog.csdn.net/yechaodechuntian/article/details/24853813 Ubuntu 12.04 下安装 JDK8 方法一:(缺点是安装 ...

  7. org.hibernate.MappingException: duplicate import异常

    在开发hibernate时,一起多谢ORM类和映射文件时,报出:org.hibernate.MappingException: duplicate import com.XXX异常 解决方案: 检查你 ...

  8. 使用jQuery Mobile实现新闻浏览器（3）

    在本教程的前两篇文章中,笔者分别向大家介绍了使用jQuery Mobile框架如何去设计手机新闻浏览器,其中实现了一个WEB版本的新闻浏览器,在本教程的最后一篇中,将讲解如何将已实现的web版本的新闻 ...

  9. android webview 遇到的问题：external/chromium/net/disk_cache/stat_hub.cc:216:

    今天也遇到这个问题,界面显示无法访问,Baidu吧,结果有些含糊其词,有的说加网络权限,我看了下我的, 有个 <uses-permission android:name="androi ...

  10. Asp.net 身份验证方式？

    [Forms 身份验证] 通过其可将没有通过身份验证的请求重定向到使用 HTTP 客户端重定向的 HTML 窗体的系统.用户提供凭据并提交该窗体.如果应用程序验证该请求,系统就会发出包含凭据或密钥的 ...