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. HDU 1247 Hat’s Words (字符串匹配，暴力)

    题意: 给出一堆单词,如果有一个单词可以分成左右串两个单词,并且在所给的一堆单词中存在,就是hat词,统计所有这样的词,并按字典序输出. 思路: 注意定义,一个hat词可以被两部分已经存在的词组成,那 ...

  2. 一个基于PDO的数据库操作类(新) 一个PDO事务实例

    <?php /* * 作者:胡睿 * 日期:2011/03/19 * 电邮:hooray0905@foxmail.com * * 20110319 * 常用数据库操作,如:增删改查,获取单条记录 ...

  3. activiti 学习（ 三 ） 之 流程启动者

    在启动一个流程时,我们会有将当前用户启动的流程保存起来,作为流程发起人(启动人.申请人.提交人) 而在保存这个流程启动者信息,api 没有明确规范该怎么存.所以这里我总结下我学到的保存流程启动者信息的 ...

  4. python练习程序（c100经典例21）

    题目: 猴子吃桃问题:猴子第一天摘下若干个桃子,当即吃了一半,还不瘾,又多吃了一个第二天早上又将剩下的桃子吃掉一半,又多吃了一个.以后每天早上都吃了前一天剩下的一半零一个.到第10天早上想再吃时,见只 ...

  5. SAS9.4 安装注意事项

    OS:Windows Server 2012 R2 SAS:9.4 TS1M1 SAS9.4的安装需要注意的地方: 一. 注意开启Shortname(装了N遍,最容易忘记的地方) SAS安装使用Sho ...

  6. FPGA代码设计规范整理

    1.设计中的FIFO.状态机接口需要有异常恢复状态和状态上报机制,格雷码电路防止被综合电路优化掉. a)自行设计的格雷码FIFO(一般用于连续数据流跨时钟域)用Synplify综合时,为了防止被优化需 ...

  7. 看人家如何拿到腾讯阿里的offer

    我是如何同时拿到阿里和腾讯offer的: https://segmentfault.com/a/1190000002627927

  8. android.os.NetworkOnMainThreadException解决

    很早就知道Android4.0以后,要把耗时的网络操作放在多线程中,处理方法有: 1) setContentView(R.layout.activity_main)下面加上如下代码 if (andro ...

  9. Undefined symbols for architecture armv7

    xcode编译过程中出现如下问题Undefined symbols for architecture armv7:... ld: symbol(s) not found for architectur ...

  10. hdu 1565(状态压缩基础题)

    题意:容易理解. 分析:这是我做的状态压缩第二题,一开始超内存了,因为数组开大了,后来超时了,因为能够成立的状态就那么多,所以你应该先把它抽出来!!总的来说还是比较简单的!! 代码实现: #inclu ...