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

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

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

  1.         protected void Page_Load(object sender, EventArgs e)
  2.         {
  3.             if (!Page.IsPostBack)
  4.             {
  5.                 DataTable dt = new DataTable();
  6.                 dt.Columns.AddRange(new DataColumn[] {
  7.                     new DataColumn("id",typeof(Int32)),
  8.                     new DataColumn("num1",typeof(Int32)),
  9.                     new DataColumn("num2",typeof(Int32))
  10.                 });
  11.  
  12.                 DataRow dr = null;
  13.                 dr = dt.NewRow();
  14.                 dr["id"] = 1;
  15.                 dr["num1"] = 20;
  16.                 dr["num2"] = 40;
  17.                 dt.Rows.Add(dr);
  18.  
  19.                 dr = dt.NewRow();
  20.                 dr["id"] = 2;
  21.                 dr["num1"] = 40;
  22.                 dr["num2"] = 30;
  23.                 dt.Rows.Add(dr);
  24.  
  25.                 this.GridView1.DataSource = dt.DefaultView;
  26.                 this.GridView1.DataBind();
  27.             }
  28.         }

前台页面body部分：

  1. <body>
  2.     <form id="form1" runat="server">
  3.         <div>
  4.             <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
  5.                 <Columns>
  6.                     <asp:TemplateField HeaderText="状态">
  7.                         <ItemTemplate>
  8.                             <asp:CheckBox ID="checkstate" runat="server" />
  9.                         </ItemTemplate>
  10.                     </asp:TemplateField>
  11.                     <asp:TemplateField HeaderText="编号">
  12.                         <ItemTemplate>
  13.                             <asp:Label ID="lblId" runat="server"> <%#Eval("id") %></asp:Label>
  14.                         </ItemTemplate>
  15.                     </asp:TemplateField>
  16.                     <asp:TemplateField HeaderText="数字1">
  17.                         <ItemTemplate>
  18.                             <asp:Label ID="lblNum1" runat="server"> <%#Eval("num1") %></asp:Label>
  19.                         </ItemTemplate>
  20.                     </asp:TemplateField>
  21.                     <asp:TemplateField HeaderText="数字2">
  22.                         <ItemTemplate>
  23.                             <asp:Label ID="lblNum2" runat="server"> <%#Eval("num2") %></asp:Label>
  24.                         </ItemTemplate>
  25.                     </asp:TemplateField>
  26.                     <asp:TemplateField HeaderText="平均值">
  27.                         <ItemTemplate>
  28.                             <asp:TextBox ID="avg_value" runat="server" />
  29.                         </ItemTemplate>
  30.                     </asp:TemplateField>
  31.                 </Columns>
  32.             </asp:GridView>
  33.         </div>
  34.     </form>
  35. </body>

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

  1.     <script src="js/jquery-1.4.2.js"></script>
  2.     <script type="text/javascript">
  3.         $(function () {
  4.             $("#<%=GridView1.ClientID%>").find("tr td input[type=checkbox]").each(function () {
  5.                 $(this).bind("click", function () {
  6.                     if (this.checked) {
  7.                         var id = $(this).parent().parent().find("span[id*=lblId]").text();
  8.                         var num1 = $(this).parent().parent().find("span[id*=lblNum1]").text();
  9.                         var num2 = $(this).parent().parent().find("span[id*=lblNum2]").text();
  10.  
  11.                         var result = (parseFloat(num1) + parseFloat(num2)) / 2;
  12.                         $(this).parent().parent().find("input[id*=avg_value]").val(result);
  13.                     } else {
  14.                         $(this).parent().parent().find("input[id*=avg_value]").val("");
  15.                     }
  16.                 });
  17.             });
  18.         });
  19.     </script>

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

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

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="jquery-1.4.2.js"></script>
  4.   <script type="text/javascript">
  5. 		$(function(){
  6. 			$("table tr td").each(function(){
  7. 				$(this).find("[type=button]").click(function(){
  8. 					alert($(this).parent().parent().find("[type=text]").val());
  9. 				});
  10. 			});
  11. 		});
  12.   </script>
  13. </head>
  14. <body>
  15. <table>
  16.   <tr>
  17.    <td>1</td>
  18.    <td><input type=text  value="数据1" /></td>
  19.    <td><input type=button  onclick="GetTest()" value="获取" /></td>
  20.   </tr>
  21.   <tr>
  22.    <td>2</td>
  23.    <td><input type=text  value="数据2" /></td>
  24.    <td><input type=button  onclick="GetTest()" value="获取" /></td>
  25.   </tr>
  26. </table>
  27. </body>
  28. </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. Codeforces 279 B Books

    题意:给出n本书,总的时间t,每本书的阅读时间a[i],必须按照顺序来阅读,问最多能够阅读多少本书 有点像紫书的第七章讲的那个滑动区间貌似 维护一个区间的消耗的时间小于等于t,然后维护一个区间的最大值 ...

  2. jstl表达式

    JSTL标签库 1.什么是JSTL JSTL是apache对EL表达式的拓展(也就是说JSTL依赖EL),JSTL是标签语言!JSTL标签使用以来非常方便, 它与JSP动作标签一样,只不过它不是JSP ...

  3. PHP学习笔记02——简易计算器

    <!DOCTYPE html> <html> <head> <title>PHP简易计算器</title> </head> &l ...

  4. BZOJ 1555 KD之死

    贪心,按t+w排序维护不一定放到拖车上的大根堆. #include<iostream> #include<cstdio> #include<cstring> #in ...

  5. tornado 实践 - 目录结构

    . ├── README.md └── store_management ├── Session.vim ├── auth │   ├── __init__.py │   ├── views.py ├ ...

  6. (转)每天一个Linux命令(8): tar

    通过SSH访问服务器,难免会要用到压缩,解压缩,打包,解包等,这时候tar命令就是是必不可少的一个功能强大的工具.linux中最流行的tar是麻雀虽小,五脏俱全,功能强大. tar命令可以为linux ...

  7. scala学习笔记(4)：占位符

    scala 中占位符的用法 1.作为“通配符”,类似Java中的*.如import scala.math._ 2.:_*作为一个整体,告诉编译器你希望将某个参数当作参数序列处理!例如val s = s ...

  8. 每天一个Linux命令(3): cd

    Linux cd 命令可以说是Linux中最基本的命令语句,其他的命令语句要进行操作,都是建立在使用 cd 命令上的. 所以,学习Linux 常用命令,首先就要学好 cd 命令的使用方法技巧. 1.  ...

  9. 【UVa-679】小球下落——二叉树的编号

    在结点1处放一个小球,它会往下落.每个内结点上都会有一个开关,初始全部关闭,当每次有小球落到一个开关上时,状态都会改变.当小球到达一个结点是,如果结点上的开关关闭,则往左走,否则往右走,直到走到叶子的 ...

  10. python numpy argsort函数用法

    numpy.argsort numpy.argsort(a, axis=-1, kind='quicksort', order=None)[source] Returns the indices th ...