实例详解jQuery结合GridView控件的使用方法_jquery

来源：动视网责编：小采时间：2020-11-27 21:48:22

实例详解jQuery结合GridView控件的使用方法_jquery

实例详解jQuery结合GridView控件的使用方法_jquery:jQuery是一种非常强大的客户端JS编程技术，这里不想过多阐述它的相关背景知识，只想简单演示一下如何与asp.net的控件结合开发。比如，我们要做一个下面如图所示的功能，效果是状态、编号、数字1、数字2、平均值所有的项都是通过后台绑定，如何点击check

推荐度：

点击下载本文 文档为doc格式

导读实例详解jQuery结合GridView控件的使用方法_jquery:jQuery是一种非常强大的客户端JS编程技术，这里不想过多阐述它的相关背景知识，只想简单演示一下如何与asp.net的控件结合开发。比如，我们要做一个下面如图所示的功能，效果是状态、编号、数字1、数字2、平均值所有的项都是通过后台绑定，如何点击check

jQuery是一种非常强大的客户端JS编程技术，这里不想过多阐述它的相关背景知识，只想简单演示一下如何与asp.net的控件结合开发。
比如，我们要做一个下面如图所示的功能，效果是状态、编号、数字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部分：

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

你会发现jQuery的代码读着很轻松，很容易理解。而且代码也很优美，最关键的是兼容性很好。
再附一个简单点的例子，这是一个静态html页面，看jQuery是如何发挥威力的。效果是点击每一行的按钮时，弹出当前行的text里面的value。

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