实例：Ajax+Jquery实现GridView的展开、合并效果(3)
4、 在页面（GridViewDrillDownjQueryQAjax.aspx）新建两个Div 如下：
第一个Div用来展示会员信息，第二个Div用来展示此会员下的订单列表。当用点击会员信息时（第一个Div），初始化Ajax请求并返回html代码到第二个Div，展示此会员的订单列表。
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、第一个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"))
src = src.replace('plus.png','minus.png');
else
src = 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://files.cnblogs.com/ywqu/GridViewDrillDownJQueryAjax.rar
英文地址：http://mosesofegypt.net/post/GridView-Grouping-Master-Detail-Drill-Down-Using-jQuery-AJAX.aspx