实例详解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 相关文章推荐
js 文件引入实现代码
Apr 23 Javascript
jquery获取input的value问题说明
Aug 19 Javascript
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 Javascript
node.js中的fs.realpath方法使用说明
Dec 16 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 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
MVC模式的PHP实现
2006/10/09 PHP
PHP实现Socket服务器的代码
2008/04/03 PHP
封装一个PDO数据库操作类代码
2009/09/09 PHP
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
PHP中调用ASP.NET的WebService的代码
2011/04/22 PHP
PHP的几个常用加密函数
2016/02/03 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
python实现简易数码时钟
2021/02/19 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
Python安装selenium包详细过程
2019/07/23 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
恶意软件的定义
2014/11/12 面试题
学生就业推荐信
2013/11/13 职场文书
毕业生找工作的求职信范文
2013/12/24 职场文书
个人简历自我评价范文
2014/02/04 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
家长会标语
2014/06/24 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP
Python中的套接字编程是什么?
2021/06/21 Python