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

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> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

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

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;  
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

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> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

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;  
}  
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.