使用Ajax和jQuery实现GridView的展开、合并

作者: 灵动生活来源: 博客园发布时间: 2009-09-07 09:36 阅读: 7460 次推荐: 0 原文链接 [收藏]

需求简介：电子商务网站中，查询会员的订单，点击“會員”，展现此会员的订单列表。

界面操作：

Step 1 展现会员列表，如下图

Step 2 点击“某一会员”行展现会员订单列表

实现思路：

1、使用用户控件（CustomerOrders.ascx）展示订单列表，此用户控件只需要包含Repeater控件并绑定数据源

2、新建一个简单页面GridViewDrillDownjQueryQAjax.aspx，在此页面引用用户控件，展示用户订单列表

3、在页面GridViewDrillDownjQueryQAjax.aspx新建两个DIV：一个用来展示会员信息，一个用来展示某个会员的订单信息。当点击某一会员信息时，展示此会员的订单列表

实现细节：

1、新建用户控件（CustomerOrders.ascx），拖数据源控件和 Repeater控件到页面，主要代码如下

在用户控件的后台代码中有一属性CustomerId，它主要用来传递参数

Code

2、重写用户控件（CustomerOrders.ascx）的OnLoad处理事件，代码如下：

Code

3、新建一个简单页面GridViewDrillDownjQueryQAjax.aspx，在此页面引用用户控件（CustomerOrders.ascx），展示用户订单列表。下面的后台方法主要用来根据会员编号（CustomerId）获得会员的订单列表。

Code

以上3步主要完成的是后台代码，那么接下来我们需要做的是：使用Ajax读取数据并折叠展示。

4、在页面（GridViewDrillDownjQueryQAjax.aspx）新建两个Div 如下：

第一个Div用来展示会员信息，第二个Div用来展示此会员下的订单列表。当用点击会员信息时（第一个Div），初始化Ajax请求并返回html代码到第二个Div，展示此会员的订单列表。

Code

5、第一个Divi的客户端点击事件处理代码调用showhide(div1Id,div2Id,customerId)方法，主要代码如下：

Code

解释：

type: 请求方式使用“post”

url: 请求的URL

data: 要传的参数

beforeSend：请求发送之前所要做的操作

contentType：设置contentType为application/json; charset=utf-8

datatype: 设置返回类型为 json

success：请求成功返回正确的结果后所要操作的事情，比如向第二个div追加订单列表html代码，然后滑动展示。

Error：请求失败，弹出失败信息

至此，使用Ajax和Jquery实现GridView的展开和合并完毕。