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

前端技术 2023/09/03 JavaScript

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

本文地址：https://www.stayed.cn/item/8653

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案