JQuery与GridView控件结合示例

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>

posted on 2013-12-13 14:28  钱呢  阅读(583)  评论(1)    收藏  举报

导航