浅析在Ajax和jQuery中实现GridView展开与合并_程序开发

浅析在Ajax和jQuery中实现GridView展开与合并

创始人

2024-06-06 09:00:42

0次

GridView展开与合并在Ajax和jQuery中实现，主要是三大步骤，包括使用用户控件（CustomerOrders.ascx）展示订单列表、新建一个简单页面GridViewDrillDownjQueryQAjax.aspx以及在页面GridViewDrillDownjQueryQAjax.aspx新建两个DIV。

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

界面操作：

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

展现会员列表

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

展现会员订单列表

实现思路：

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

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

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

实现细节：

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

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

Code  
 ID="sqlDsOrders" runat="server" ConnectionString="<%$ ConnectionStrings:Northwind %>" 
SelectCommand="SELECT [OrderID], [OrderDate], [RequiredDate], [Freight], [ShippedDate] FROM [Orders] WHERE ([CustomerID] = @CustomerID)"> 
 
 Name="CustomerID" Type="String" DefaultValue="" /> 
 
 
 ID="List" DataSourceID="sqlDsOrders" runat="server"> 
 
 class="grid" cellspacing="0" rules="all" border="1" style="border-collapse: collapse;"> 
 
 scope="col">  
 scope="col">Order ID 
 scope="col">Date Ordered 
 scope="col">Date Required 
 scope="col" style="text-align: right;">Freight 
 scope="col">Date Shipped 
 
 
 
 class='<%# (Container.ItemIndex%2==0) ? "row" : "altrow" %>'> 
 class="rownum"><%# Container.ItemIndex+1 %> 
 style="width: 80px;"><%# Eval("OrderID") %> 
 style="width: 100px;"><%# Eval("OrderDate","{0:dd/MM/yyyy}") %> 
 style="width: 110px;"><%# Eval("RequiredDate", "{0:dd/MM/yyyy}")%> 
 style="width: 50px; text-align: right;"><%# Eval("Freight","{0:F2}") %> 
 style="width: 100px;"><%# Eval("ShippedDate", "{0:dd/MM/yyyy}")%>

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

Code  
protected override void OnLoad(EventArgs e)  
{  
this.sqlDsOrders.SelectParameters["CustomerID"].DefaultValue = this.CustomerId;  
base.OnLoad(e);  
}

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

Code  
[System.Web.Services.WebMethod()]  
public static string GetOrders(string customerId)  
{  
System.Threading.Thread.Sleep(500);  
Page page = new Page();  
CustomerOrders ctl = (CustomerOrders)page.LoadControl("~/CustomerOrders.ascx");  
ctl.CustomerId = customerId;  
page.Controls.Add(ctl);  
System.IO.StringWriter writer = new System.IO.StringWriter();  
HttpContext.Current.Server.Execute(page, writer, false);  
string output = writer.ToString();  
writer.Close();  
return output;  
}

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

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

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

Code  
 Width="100%" AllowPaging="True" ID="gvCustomers" AutoGenerateColumns="False" 
DataSourceID="sqlDsCustomers" runat="server" ShowHeader="False"> 
 
 
 
 class="group" style="display:inline" id='<%#String.Format("customer{0}",Container.DataItemIndex) %>'   
onclick='showhide(<%#String.Format("\"#customer{0}\"",Container.DataItemIndex) %>,  
<%#String.Format("\"#order{0}\"",Container.DataItemIndex) %>,  
<%#String.Format("\"{0}\"",Eval("CustomerID")) %>)'> 
 ID="imgCollapsible" CssClass="first" ImageUrl="~/Assets/img/plus.png" 
Style="margin-right: 5px;" runat="server" /> class="header"> 
<%#Eval("CustomerID")%>:  
<%#Eval("CompanyName")%>(<%#Eval("TotalOrders")%> Orders)

id='<%#String.Format("order{0}",Container.DataItemIndex) %>' class="order">

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

Code  
function showhide(master,detail,customerId)  
{   
//First child of master div is the image  
var src = $(master).children()[0].src;  
//Switch image from (+) to (-) or vice versa.  
if(src.endsWith("plus.png"))  
srcsrc = src.replace('plus.png','minus.png');  
else  
srcsrc = src.replace('minus.png','plus.png');  
//if the detail DIV is empty Initiate AJAX Call, if not that means DIV already populated with data               
if($(detail).html() == "")  
{  
//Prepare Progress Image  
var $offset = $(master).offset();  
$('#progress').css('visibility','visible');  
$('#progress').css('top',$offset.top);  
$('#progress').css('left',$offset.left+$(master).width());                      
//Prepare Parameters  
var params = '{customerId:"'+ customerId +'"}';                      
//Issue AJAX Call  
$.ajax({  
type: "POST", //POST  
url: "GridViewDrillDownjQueryAjax.aspx/GetOrders", //Set call to Page Method  
data: params, // Set Method Params  
beforeSend: function(xhr) {  
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");},  
contentType: "application/json; charset=utf-8", //Set Content-Type  
dataType: "json", // Set return Data Type  
success: function(msg, status) {  
$('#progress').css('visibility','hidden');  
$(master).children()[0].src = src;  
$(detail).html(msg);  
$(detail).slideToggle("normal"); // Succes Callback  
},  
error: function(xhr,msg,e){  
alert(msg);//Error Callback  
}  
});  
}  
else  
{  
//Toggle expand/collapse                     
$(detail).slideToggle("normal");  
$(master).children()[0].src = src;  
}  
}

解释：

type: 请求方式使用“post”

url: 请求的URL

data: 要传的参数

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

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

datatype: 设置返回类型为 json

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

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

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

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

原文标题：使用Ajax和Jquery实现GridView的展开、合并

链接：http://www.cnblogs.com/ywqu/archive/2009/09/06/1561420.html

【编辑推荐】

jQuery调用WCF服务传递JSON对象

学习jQuery必须知道的几种常用方法
用XML+XSLT+CSS+JQuery组建ASP.NET网站
使用jQuery和PHP构建一个受Ajax驱动的Web页面
jQuery调用WCF需要注意的一些问题

上一篇：公共云计算彼端的数据能否得到有效保护？

下一篇：如何学习CCNA——专业英文词汇全集

浅析在Ajax和jQuery中实现GridView展开与合并

相关内容

热门资讯