日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

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

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到云浮網(wǎng)站設(shè)計(jì)與云浮網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國(guó)際域名空間、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋云浮地區(qū)。

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

界面操作：

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

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

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

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

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

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

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

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

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

 
 
 
 

  
  
  
  
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、  新建一個(gè)簡(jiǎn)單頁(yè)面GridViewDrillDownjQueryQAjax.aspx，在此頁(yè)面引用用戶控件（CustomerOrders.ascx），展示用戶訂單列表。下面的后臺(tái)方法主要用來(lá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)代碼，那么接下來(lái)我們需要做的是： 使用Ajax讀取數(shù)據(jù)并折疊展示。

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

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

 
 
 
 

  
  
  
  
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)