jQuery と GridView control_jquery を組み合わせた使用方法の詳細な例-jsチュートリアル-php.cn

jQuery と GridView control_jquery を組み合わせた使用方法の詳細な例

WBOY

リリース： 2016-05-16 15:21:47

オリジナル

1230 人が閲覧しました

jQuery は非常に強力なクライアント側 JS プログラミングテクノロジです。ここでは、関連する背景知識については詳しく説明しませんが、asp.net コントロールと組み合わせて開発する方法を簡単に説明したいと思います。
たとえば、次の図に示すような関数を実行したいとします。その結果、ステータス、数値、数値 1、数値 2、平均のすべての項目が背景でバインドされます。チェックボックスボタンをクリックして自動的に計算する方法です。現在の行 2 数値の平均はいくらですか? 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> 
  <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>

ログイン後にコピー

キーはページの先頭部分にあり、次のコードを入力して、次のような効果を実現します。

<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 コードは読みやすく、理解しやすいことがわかります。コードも非常に美しく、最も重要なのは互換性が高いことです。
これは、jQuery がどのように威力を発揮するかを示す、より簡単な例を添付しています。その結果、各行のボタンをクリックすると、現在の行のテキストの値がポップアップ表示されます。

<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 は短いにもかかわらず、非常に強力であるとため息をつきます。