您的位置:知识库 » .NET技术

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

作者: 灵动生活  来源: 博客园  发布时间: 2009-09-07 09:36  阅读: 7322 次  推荐: 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 设置contentTypeapplication/json; charset=utf-8

datatype: 设置返回类型为 json

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

Error 请求失败,弹出失败信息

 

至此,使用AjaxJquery实现GridView的展开和合并完毕。

 

英文地址:http://mosesofegypt.net/post/GridView-Grouping-Master-Detail-Drill-Down-Using-jQuery-AJAX.aspx

0
0

.NET技术热门文章

    .NET技术最新文章

      最新新闻

        热门新闻