Detailliertes Beispiel für die Verwendung von jQuery in Kombination mit GridView control

Detailliertes Beispiel für die Verwendung von jQuery in Kombination mit GridView control_jquery

WBOY

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

Original

1230 Leute haben es durchsucht

jQuery ist eine sehr leistungsstarke clientseitige JS-Programmiertechnologie. Ich möchte hier nicht zu sehr auf das entsprechende Hintergrundwissen eingehen, sondern nur kurz zeigen, wie man es in Verbindung mit asp.net-Steuerelementen entwickelt.
Zum Beispiel möchten wir eine Funktion wie in der folgenden Abbildung ausführen. Der Effekt besteht darin, dass alle Elemente mit Status, Nummer, Nummer 1, Nummer 2 und Durchschnitt durch den Hintergrund gebunden werden. So klicken Sie auf die Kontrollkästchenschaltfläche, um sie automatisch zu berechnen die aktuelle Zeile zwei Was ist der Durchschnitt der Zahlen? Die Prämisse besteht darin, jQuery zu verwenden, um dies zu erreichen?

Wir geben den folgenden Code direkt in das Page_Load-Ereignis der Seite ein:

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

Nach dem Login kopieren

Hauptteil der Titelseite:

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

Nach dem Login kopieren

Der Schlüssel befindet sich im Kopfteil der Seite. Geben Sie den folgenden Code ein, um den gezeigten Effekt zu erzielen.

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

Nach dem Login kopieren

Sie werden feststellen, dass jQuery-Code leicht zu lesen und zu verstehen ist. Und der Code ist auch sehr schön und das Wichtigste ist, dass er gut kompatibel ist.
Im Anhang finden Sie ein einfacheres Beispiel. Dies ist eine statische HTML-Seite, um zu sehen, wie jQuery seine Leistungsfähigkeit entfalten kann. Der Effekt besteht darin, dass beim Klicken auf die Schaltfläche jeder Zeile der Wert im Text der aktuellen Zeile angezeigt wird.

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

Nach dem Login kopieren

Stellen Sie sich vor, wenn wir dafür js verwenden, wäre das sehr mühsam und wir müssen auch die Kompatibilität verschiedener Browser berücksichtigen. Wenn ich das sehe, muss ich seufzen, obwohl jQuery kurz ist, ist es ziemlich leistungsfähig.