Heim > Artikel > Web-Frontend > Detailliertes Beispiel für die Verwendung von jQuery in Kombination mit GridView control_jquery

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

WBOYOriginal: 2016-05-16 15:21:471231Durchsuche

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

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>

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>

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>

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.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：AngularJS verwendet $sce zur Steuerung der Code-Sicherheitsprüfungen_AngularJSNächster Artikel：AngularJS verwendet $sce zur Steuerung der Code-Sicherheitsprüfungen_AngularJS

In Verbindung stehende Artikel

Mehr sehen