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

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虽然短小,但是相当强大啊。

(0)

相关推荐

  • JQuery的ajax基础上的超强GridView展示

    看到一个这样的例子和大家分享下.这个一直是我想要做到的. 首先先展示下最终的样子: 使用northwind的数据.点击前面的加号会把其它属于这个产品的详细订单展示出来,而每个产品后面都会有它的订单个数.点击'+'后的样子: 先分析下它的实现: 第一个图的显示是个Gridview,当点击每条记录前面的'+'时会使用jQuery的ajax功能调用一个Web Method,并传输一个当前产品的ID进去,然后会定义一个继承UserControl的类,它能够添加一个ascx文件,然后这个类里面定义一个Vi

  • 如何用jQuery实现ASP.NET GridView折叠伸展效果

    今天做静态页面时有一个需求,就是页面上有一组两个选项的单选按钮和一个有6行的列表(该列表用Table标签实现,不是DIV),当选择单选按钮的选项一时,列表的前三条信息显示后三条信息隐藏,当选择单选按钮的选项二时,列表的前三条信息隐藏后三条信息显示.那么就牵扯出我们今天的话题拉,如何实现呢?实现后该实现还能应用到哪些场景? 1.第一反应的解决方案 碰到这个需求后,我第一反应就是很简单啊,分别用两个DIV将前三个Table中的TR标签与后三个TR标签包起来,然后通过JS控制DIV的显示. 第一步:使

  • JQuery一种取同级值的方式(比如你在GridView中)

    复制代码 代码如下: <asp:GridView ID="gvReceipt" runat="server" Width="100%" AutoGenerateColumns="False" DataKeyNames="ID" CssClass="Grid" > <Columns> <asp:TemplateField> <ItemTemplat

  • Jquery+ajax请求data显示在GridView上(asp.net)

    AJAXLoadProgressForm.aspx: 复制代码 代码如下: <script src="JS/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> function ShowProgressDiv() { var ID = $("input#idtxt").val();

  • 利用jQuery 实现GridView异步排序、分页的代码

    每次请求备份管理页面时,服务端会把所以的备份还原信息都传到客户端,然后ui.tabs将两种信息折叠起来分别显示,好在ui.tabs给我提供ajax功能,我们的每个tab可以直接应用另外一个页面 如: 复制代码 代码如下: <div id="container"> <ul> <li><a href="#fragment-1"><span>备份</span></a></li>

  • jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)

    理由:jquery简单,兼容性好且容易封装.废话不多说,马上开始我们的Jquery插件编写吧.应该有很多人写过类似的插件,我也是有些模仿flexGrid的形式. 需求:GridView显示数据,无刷新分页,无刷新排序,无刷新过滤(搜索数据),基于ASP.NET(我们这里有ashx一般处理文件来实现). 使用到技术:asp.net2.0, jquery,css 首先写的是jquery插件方面,使用的核心函数还是jquery的ajax函数,方便快捷. 复制代码 代码如下: $.ajax({ type

  • jQuery数据检索中根据关键字快速定位GridView指定行的实现方法

    本文实例讲述了jQuery数据检索中根据关键字快速定位GridView指定行的实现方法.分享给大家供大家参考,具体如下: 运行截图如下: 具体代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowGridviewContent.aspx.cs" Inherits="ShowGridviewContent" %> <!DOCTYPE

  • Jquery简单实现GridView行高亮的方法

    本文实例讲述了Jquery简单实现GridView行高亮的方法.分享给大家供大家参考.具体实现方法如下: $("#gridID tr:not(tr:last-child)").filter(function () { return $('td', this).length && !('table', this).length }).hover(function () { $(this).toggleClass('hover_css'); }); 希望本文所述对大家的jQ

  • asp.net+jquery Gridview的多行拖放, 以及跨控件拖放

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="t

  • 利用jQuery及AJAX技术定时更新GridView的某一列数据

    看到一个问题:定时更新GridView的某一列中的状态文本.马上就有了思路:GridView最后会生成表格,所以我们在页面中通过Ajax更新表格的列,从而达到ajax更新GridView的效果. 具体实现: 准备一个xml文件,用于存储要更新的数据,在页面中启动一个定时器,每隔5秒钟调用一个函数,函数里边通过$.ajax获取xml中的数据,解析xml,遍历表格行,匹配要更新的数据,更新. getuserlist.xml 定义一个UserList的根节点,下边每个UserItem对应一条数据,UI

随机推荐