Rumah > Artikel > hujung hadapan web > Contoh terperinci tentang cara menggunakan jQuery digabungkan dengan GridView control_jquery

Contoh terperinci tentang cara menggunakan jQuery digabungkan dengan GridView control_jquery

WBOYasal: 2016-05-16 15:21:471231semak imbas

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

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>

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>

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>

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.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：AngularJS menggunakan $sce untuk mengawal semakan keselamatan kod_AngularJSArtikel seterusnya：AngularJS menggunakan $sce untuk mengawal semakan keselamatan kod_AngularJS

Artikel berkaitan

Lihat lagi