实例详解jQuery结合GridView控件的使用方法


Posted in Javascript onJanuary 04, 2016

jQuery是一种非常强大的客户端JS编程技术,这里不想过多阐述它的相关背景知识,只想简单演示一下如何与asp.net的控件结合开发。
比如,我们要做一个下面如图所示的功能,效果是状态、编号、数字1、数字2、平均值所有的项都是通过后台绑定,如何点击checkbox按钮,来实现自动计算当前行两个数字的平均值呢?前提是用jQuery来实现?

实例详解jQuery结合GridView控件的使用方法

我们直接在页面的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虽然短小,但是相当强大啊。

Javascript 相关文章推荐
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
Javascript继承机制的设计思想分享
Aug 28 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
解决layer.prompt无效的问题
Sep 24 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 #Javascript
JavaScript原型及原型链终极详解
Jan 04 #Javascript
jQuery实现简单的点赞效果
May 29 #Javascript
jQuery+Ajax实现无刷新操作
Jan 04 #Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 #Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 #Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 #Javascript
You might like
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
python安装以及IDE的配置教程
2015/04/29 Python
python搭建虚拟环境的步骤详解
2016/09/27 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
python3对接mysql数据库实例详解
2019/04/30 Python
python基于event实现线程间通信控制
2020/01/13 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
环境工程求职简历的自我评价范文
2013/10/24 职场文书
初级会计求职信范文
2014/02/15 职场文书
信息科学与技术专业求职信范文
2014/02/20 职场文书
优秀公益广告词大全
2014/03/19 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
婚庆答谢词
2015/01/04 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis
详解Flutter自定义应用程序内键盘的实现方法
2022/06/14 Java/Android
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL