JQuery与GridView控件结合示例

JQuery是一种非常强大的客户端JS编程技术，这里不想过多阐述它的相关背景知识，只想简单演示一下如何与asp.net的控件结合开发。

创新互联-专业网站定制、快速模板网站建设、高性价比龙岗网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式龙岗网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖龙岗地区。费用合理售后完善，十多年实体公司更值得信赖。

比如，我们要做一个下面如图所示的功能，效果是状态、编号、数字1、数字2、平均值所有的项都是通过后台绑定，如何点击checkbox按钮，来实现自动计算当前行两个数字的平均值呢？前提是用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部分：

    

        

            
                
                    
                        
                            
                        
                    
                    
                        
                             <%#Eval("id") %>
                        
                    
                    
                        
                             <%#Eval("num1") %>
                        
                    
                    
                        
                             <%#Eval("num2") %>
                        
                    
                    
                        
                            
                        
                    
                
            
        
    

关键的在页面的head部分，输入如下代码就可以实现如图效果了。

你会发现JQuery的代码读着很轻松，很容易理解。而且代码也很优美，最关键的是兼容性很好。

再附一个简单点的例子，这是一个静态html页面，看JQuery是如何发挥威力的。效果是点击每一行的按钮时，弹出当前行的text里面的value。

  


 
  
 
   
1
   

   

  
 
  

   
2
   

   

  
 

试想，如果我们用js去做，将会很麻烦，而且还要考虑各种浏览器的兼容性。看到这里不得不感叹一句，JQuery虽然短小，但是相当强大啊。

分享文章：JQuery与GridView控件结合示例
标题来源：http://bjjierui.cn/article/gcdpij.html