浅析在Ajax和jQuery中实现GridView展开与合并
创始人
2024-06-06 09:00:42
0

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,它主要用来传递参数

  1. Code  
  2.  ID="sqlDsOrders" runat="server" ConnectionString="<%$ ConnectionStrings:Northwind %>" 
  3. SelectCommand="SELECT [OrderID], [OrderDate], [RequiredDate], [Freight], [ShippedDate] FROM [Orders] WHERE ([CustomerID] = @CustomerID)"> 
  4.  
  5.  Name="CustomerID" Type="String" DefaultValue="" /> 
  6.  
  7.  
  8.  ID="List" DataSourceID="sqlDsOrders" runat="server"> 
  9.  
  10.  class="grid" cellspacing="0" rules="all" border="1" style="border-collapse: collapse;"> 
  11.  
  12.  scope="col">  
  13.  scope="col">Order ID 
  14.  scope="col">Date Ordered 
  15.  scope="col">Date Required 
  16.  scope="col" style="text-align: right;">Freight 
  17.  scope="col">Date Shipped 
  18.  
  19.  
  20.  
  21.  class='<%# (Container.ItemIndex%2==0) ? "row" : "altrow" %>'> 
  22.  class="rownum"><%# Container.ItemIndex+1 %> 
  23.  style="width: 80px;"><%# Eval("OrderID") %> 
  24.  style="width: 100px;"><%# Eval("OrderDate","{0:dd/MM/yyyy}") %> 
  25.  style="width: 110px;"><%# Eval("RequiredDate", "{0:dd/MM/yyyy}")%> 
  26.  style="width: 50px; text-align: right;"><%# Eval("Freight","{0:F2}") %> 
  27.  style="width: 100px;"><%# Eval("ShippedDate", "{0:dd/MM/yyyy}")%> 
  28.  
  29.  
  30.  
  31.  
  32.  
  33.  

2、 重写用户控件(CustomerOrders.ascx)的OnLoad处理事件,代码如下:

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

 

3、  新建一个简单页面GridViewDrillDownjQueryQAjax.aspx,在此页面引用用户控件(CustomerOrders.ascx),展示用户订单列表。下面的后台方法主要用来根据会员编号(CustomerId)获得会员的订单列表。

  1. Code  
  2. [System.Web.Services.WebMethod()]  
  3. public static string GetOrders(string customerId)  
  4. {  
  5. System.Threading.Thread.Sleep(500);  
  6. Page page = new Page();  
  7. CustomerOrders ctl = (CustomerOrders)page.LoadControl("~/CustomerOrders.ascx");  
  8. ctl.CustomerId = customerId;  
  9. page.Controls.Add(ctl);  
  10. System.IO.StringWriter writer = new System.IO.StringWriter();  
  11. HttpContext.Current.Server.Execute(page, writer, false);  
  12. string output = writer.ToString();  
  13. writer.Close();  
  14. return output;  

以上3步主要完成的是后台代码,那么接下来我们需要做的是: 使用Ajax读取数据并折叠展示。

4、  在页面(GridViewDrillDownjQueryQAjax.aspx)新建两个Div 如下:

第一个Div用来展示会员信息,第二个Div用来展示此会员下的订单列表。当用点击会员信息时(第一个Div),初始化Ajax请求并返回html代码到第二个Div,展示此会员的订单列表。

  1. Code  
  2.  Width="100%" AllowPaging="True" ID="gvCustomers" AutoGenerateColumns="False" 
  3. DataSourceID="sqlDsCustomers" runat="server" ShowHeader="False"> 
  4.  
  5.  
  6.  
  7.  class="group" style="display:inline" id='<%#String.Format("customer{0}",Container.DataItemIndex) %>'   
  8. onclick='showhide(<%#String.Format("\"#customer{0}\"",Container.DataItemIndex) %>,  
  9. <%#String.Format("\"#order{0}\"",Container.DataItemIndex) %>,  
  10. <%#String.Format("\"{0}\"",Eval("CustomerID")) %>)'> 
  11.  ID="imgCollapsible" CssClass="first" ImageUrl="~/Assets/img/plus.png" 
  12. Style="margin-right: 5px;" runat="server" /> class="header"> 
  13. <%#Eval("CustomerID")%>:  
  14. <%#Eval("CompanyName")%>(<%#Eval("TotalOrders")%> Orders)  
                                                          
  •  id='<%#String.Format("order{0}",Container.DataItemIndex) %>' class="order">
  •  
  •  
  •  
  •  
  •  
  • 5、第一个Divi的客户端点击事件处理代码调用showhide(div1Id,div2Id,customerId)方法,主要代码如下:

    1. Code  
    2. function showhide(master,detail,customerId)  
    3. {   
    4. //First child of master div is the image  
    5. var src = $(master).children()[0].src;  
    6. //Switch image from (+) to (-) or vice versa.  
    7. if(src.endsWith("plus.png"))  
    8. srcsrc = src.replace('plus.png','minus.png');  
    9. else  
    10. srcsrc = src.replace('minus.png','plus.png');  
    11. //if the detail DIV is empty Initiate AJAX Call, if not that means DIV already populated with data               
    12. if($(detail).html() == "")  
    13. {  
    14. //Prepare Progress Image  
    15. var $offset = $(master).offset();  
    16. $('#progress').css('visibility','visible');  
    17. $('#progress').css('top',$offset.top);  
    18. $('#progress').css('left',$offset.left+$(master).width());                      
    19. //Prepare Parameters  
    20. var params = '{customerId:"'+ customerId +'"}';                      
    21. //Issue AJAX Call  
    22. $.ajax({  
    23. type: "POST", //POST  
    24. url: "GridViewDrillDownjQueryAjax.aspx/GetOrders", //Set call to Page Method  
    25. data: params, // Set Method Params  
    26. beforeSend: function(xhr) {  
    27. xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");},  
    28. contentType: "application/json; charset=utf-8", //Set Content-Type  
    29. dataType: "json", // Set return Data Type  
    30. success: function(msg, status) {  
    31. $('#progress').css('visibility','hidden');  
    32. $(master).children()[0].src = src;  
    33. $(detail).html(msg);  
    34. $(detail).slideToggle("normal"); // Succes Callback  
    35. },  
    36. error: function(xhr,msg,e){  
    37. alert(msg);//Error Callback  
    38. }  
    39. });  
    40. }  
    41. else  
    42. {  
    43. //Toggle expand/collapse                     
    44. $(detail).slideToggle("normal");  
    45. $(master).children()[0].src = src;  
    46. }  

    解释:

    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

    【编辑推荐】

    1. jQuery调用WCF服务传递JSON对象
    2. 学习jQuery必须知道的几种常用方法
    3. 用XML+XSLT+CSS+JQuery组建ASP.NET网站
    4. 使用jQuery和PHP构建一个受Ajax驱动的Web页面
    5. jQuery调用WCF需要注意的一些问题

    相关内容

    热门资讯

    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
    如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
    20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
    德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
    为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
    《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...
    2012年第四季度互联网状况报... [[71653]]  北京时间4月25日消息,据国外媒体报道,全球知名的云平台公司Akamai Te...