淺析在Ajax和jQuery中實現GridView展開與合并
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
- <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"> </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、 新建一個簡單頁面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
- <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"))
- 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
【編輯推薦】
