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

作者：bea

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

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

有用 | 无用

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

猜你喜欢

您可能感兴趣的文章: