Contoh terperinci tentang cara menggunakan jQuery digabungkan dengan GridView control

Contoh terperinci tentang cara menggunakan jQuery digabungkan dengan GridView control_jquery

WBOY

Lepaskan： 2016-05-16 15:21:47

asal

1267 orang telah melayarinya

jQuery ialah teknologi pengaturcaraan JS pihak pelanggan yang sangat berkuasa.
Sebagai contoh, kita ingin melakukan fungsi seperti yang ditunjukkan dalam rajah di bawah Kesannya ialah semua item status, nombor, nombor 1, nombor 2, dan purata diikat melalui latar belakang Bagaimana untuk mengklik butang kotak semak untuk mengira secara automatik baris dua semasa Apakah purata nombor itu? Premisnya ialah menggunakan jQuery untuk mencapai?

Kami terus memasukkan kod berikut dalam acara Page_Load pada halaman:

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(); 
  } 
}

Salin selepas log masuk

Bahagian badan muka depan:

<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>

Salin selepas log masuk

Kuncinya ada di bahagian kepala halaman Masukkan kod berikut untuk mencapai kesan seperti yang ditunjukkan.

<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>

Salin selepas log masuk

Anda akan mendapati bahawa kod jQuery mudah dibaca dan mudah difahami. Dan kod itu juga sangat cantik, dan perkara yang paling penting ialah ia mempunyai keserasian yang baik.
Dilampirkan ialah contoh yang lebih mudah Ini adalah halaman html statik untuk melihat bagaimana jQuery boleh menggunakan kuasanya. Kesannya ialah apabila butang setiap baris diklik, nilai dalam teks baris semasa muncul.

<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>

Salin selepas log masuk

Bayangkan, jika kita menggunakan js untuk melakukannya, ia akan menjadi sangat menyusahkan, dan kita juga perlu mempertimbangkan keserasian pelbagai pelayar. Melihat ini, saya perlu mengeluh, walaupun jQuery pendek, ia agak berkuasa.