Home > Developer > JavaScript

Example details jQuery combined with the use of the GridView control, jquerygridview

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Example details jQuery combined with the use of the GridView control, jquerygridview

JQuery is a very powerful client-side JS programming technology. I don't want to elaborate on the background knowledge too much here. I just want to briefly demonstrate how to develop it in combination with asp.net controls.
For example, we want to implement the following functions: status, number, Number 1, number 2, and average all items are bound through the background. How to click the checkbox button, to automatically calculate the average of the two numbers in the current row? Is it implemented using jQuery?

Enter the following code in the Page_Load event on the page:

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

Front-end page body:

<Body> <form id = "form1" runat = "server"> <div> <asp: gridView ID = "GridView1" runat = "server" AutoGenerateColumns = "false"> <Columns> <asp: TemplateField HeaderText = "status"> <ItemTemplate> <asp: checkBox ID = "checkstate" runat = "server"/> </ItemTemplate> </asp: TemplateField> <asp: TemplateField HeaderText = "no."> <ItemTemplate> <asp: label ID = "lblId" runat = "server"> <% # Eval ("id") %> </asp: Label> </ItemTemplate> </asp: templateField> <asp: TemplateField HeaderText = "Number 1"> <ItemTemplate> <asp: Label ID = "lblNum1" runat = "server"> <% # Eval ("num1 ") %> </asp: Label> </ItemTemplate> </asp: TemplateField> <asp: TemplateField HeaderText = "Number 2"> <ItemTemplate> <asp: label ID = "lblNum2" runat = "server"> <% # Eval ("num2") %> </asp: Label> </ItemTemplate> </asp: templateField> <asp: TemplateField HeaderText = "average"> <ItemTemplate> <asp: TextBox ID = "avg_value" runat = "server"/> </ItemTemplate> </asp: templateField> </Columns> </asp: GridView> </div> </form> </body>


The key is in the head part of the page. Enter the following code to achieve the effect.

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


You will find that jQuery's code is easy to read and understand. The Code is also very elegant, and the most important thing is that the compatibility is good.
A simple example is provided. This is a static html page, and you can see how jQuery can exert its power. The result is that when you click the button for each row, the value in the text of the current row is displayed.

<Html> 

Imagine that if we use js, it will be very troublesome, and we need to consider the compatibility of various browsers. I have to lament that jQuery is short but powerful.

Articles you may be interested in:

 
    
 
  
  • Powerful GridView Display Based on JQuery's ajax
    • 
 
  
  • Asp.net + jquery Gridview multi-row drag and drop, and cross-control drag and drop
    • 
 
  
  • Code for asynchronous sorting and paging using jQuery
    • 
 
  
  • Jquery + ashx brushless newest GridView data display plug-in (implement paging, sorting, filtering)
    • 
 
  
  • Jquery + ajax request data is displayed on the GridView (asp.net)
    • 
 
  
  • JQuery is a method for getting the same level (for example, in the GridView)
    • 
 
  
  • Jquery Simple Method for displaying rows in the GridView
    • 
 
  
  • How to Use jQuery to implement ASP. NET GridView folding and stretching
    • 
 
  
  • Use jQuery and AJAX technology to regularly update a column of data in the GridView
    •

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
wordpress the field use of static in java with example c# gridview example c# gridview example what use of interface in java with example use of static keyword in java with example use of final keyword in java with example

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More