淺析在Ajax和jQuery中實(shí)現(xiàn)GridView展開與合并

作者：靈動(dòng)生活 2009-09-07 14:41:48

這里將介紹在Ajax和jQuery中實(shí)現(xiàn)GridView展開與合并，這里講以會(huì)員訂單處理為標(biāo)準(zhǔn)，希望本文能對(duì)大家有所幫助。

GridView展開與合并在Ajax和jQuery中實(shí)現(xiàn)，主要是三大步驟，包括使用用戶控件（CustomerOrders.ascx）展示訂單列表、新建一個(gè)簡單頁面GridViewDrillDownjQueryQAjax.aspx以及在頁面GridViewDrillDownjQueryQAjax.aspx新建兩個(gè)DIV。

需求簡介：電子商務(wù)網(wǎng)站中，查詢會(huì)員的訂單，點(diǎn)擊“會(huì)員”，展現(xiàn)此會(huì)員的訂單列表。

界面操作：

Step 1 展現(xiàn)會(huì)員列表，如下圖

展現(xiàn)會(huì)員列表

Step 2 點(diǎn)擊“某一會(huì)員”行展現(xiàn)會(huì)員訂單列表

展現(xiàn)會(huì)員訂單列表

實(shí)現(xiàn)思路：

1、使用用戶控件（CustomerOrders.ascx）展示訂單列表，此用戶控件只需要包含Repeater控件并綁定數(shù)據(jù)源

2、新建一個(gè)簡單頁面GridViewDrillDownjQueryQAjax.aspx，在此頁面引用用戶控件，展示用戶訂單列表

3、在頁面GridViewDrillDownjQueryQAjax.aspx新建兩個(gè)DIV：一個(gè)用來展示會(huì)員信息，一個(gè)用來展示某個(gè)會(huì)員的訂單信息。當(dāng)點(diǎn)擊某一會(huì)員信息時(shí)，展示此會(huì)員的訂單列表

實(shí)現(xiàn)細(xì)節(jié)：

1、新建用戶控件（CustomerOrders.ascx），拖數(shù)據(jù)源控件和 Repeater控件到頁面，主要代碼如下

在用戶控件的后臺(tái)代碼中有一屬性CustomerId，它主要用來傳遞參數(shù)

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

2、重寫用戶控件（CustomerOrders.ascx）的OnLoad處理事件，代碼如下：

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

3、新建一個(gè)簡單頁面GridViewDrillDownjQueryQAjax.aspx，在此頁面引用用戶控件（CustomerOrders.ascx），展示用戶訂單列表。下面的后臺(tái)方法主要用來根據(jù)會(huì)員編號(hào)（CustomerId）獲得會(huì)員的訂單列表。

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步主要完成的是后臺(tái)代碼，那么接下來我們需要做的是：使用Ajax讀取數(shù)據(jù)并折疊展示。

4、在頁面（GridViewDrillDownjQueryQAjax.aspx）新建兩個(gè)Div 如下：

第一個(gè)Div用來展示會(huì)員信息，第二個(gè)Div用來展示此會(huì)員下的訂單列表。當(dāng)用點(diǎn)擊會(huì)員信息時(shí)（第一個(gè)Div），初始化Ajax請(qǐng)求并返回html代碼到第二個(gè)Div，展示此會(huì)員的訂單列表。

Code  
<asp:GridView Width="100%" AllowPaging="True" ID="gvCustomers" AutoGenerateColumns="False" 
DataSourceID="sqlDsCustomers" runat="server" ShowHeader="False"> 
<Columns> 
<asp:TemplateField> 
<ItemTemplate> 
<div 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")) %>)'> 
<asp:Image ID="imgCollapsible" CssClass="first" ImageUrl="~/Assets/img/plus.png" 
Style="margin-right: 5px;" runat="server" /><span class="header"> 
<%#Eval("CustomerID")%>:  
<%#Eval("CompanyName")%>(<%#Eval("TotalOrders")%> Orders) </span> 
</div>                                                          
<div id='<%#String.Format("order{0}",Container.DataItemIndex) %>' class="order"></div> 
</ItemTemplate> 
</asp:TemplateField> 
</Columns> 
</asp:GridView>

5、第一個(gè)Divi的客戶端點(diǎn)擊事件處理代碼調(diào)用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;  
}  
}