JQuery与GridView控件结合示例
2013-12-28 12:42
381 查看
JQuery是一种非常强大的客户端JS编程技术,这里不想过多阐述它的相关背景知识,只想简单演示一下如何与asp.net的控件结合开发。比如,我们要做一个下面如图所示的功能,效果是状态、编号、数字1、数字2、平均值所有的项都是通过后台绑定,如何点击checkbox按钮,来实现自动计算当前行两个数字的平均值呢?前提是用JQuery来实现?
我们直接在页面的Page_Load事件中输入如下代码:
再附一个简单点的例子,这是一个静态html页面,看JQuery是如何发挥威力的。效果是点击每一行的按钮时,弹出当前行的text里面的value。
本文出自 “Focus on .NET” 博客,请务必保留此出处http://csharper.blog.51cto.com/3052247/1345977
我们直接在页面的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 value="获取" /></td> </tr> <tr> <td>2</td> <td><input type=text value="数据2" /></td> <td><input type=button value="获取" /></td> </tr> </table> </body> </html>试想,如果我们用js去做,将会很麻烦,而且还要考虑各种浏览器的兼容性。看到这里不得不感叹一句,JQuery虽然短小,但是相当强大啊。
本文出自 “Focus on .NET” 博客,请务必保留此出处http://csharper.blog.51cto.com/3052247/1345977
相关文章推荐
- 【jQuery】之Ajax相关方法简单介绍
- jQuery select的操作代码
- jQuery对Select操作大集合
- jQuery 图片轮播
- Jquery ui tabs控件的使用技巧
- JQuery的$命名冲突详细解析
- jQuery技巧
- jquery中each用法
- jquery中each用法
- jquery中each用法
- jquery中each用法
- jQuery CSS选择器
- jQuery导航条的效果(左侧菜单)
- 系统学习jQuery.核心知识.局部.jQuery操作.DOM操作.插入节点
- jQuery实现隔行变色、悬停变色 ( CSS3伪类选择器:nth-child() )
- JQuery.getJSON 没反应
- jquery easyui
- jquery改变tr背景色的示例代码
- jQuery对Select的操作大集合(收藏)
- JQuery的$命名冲突详细解析