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

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

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);
  6. }

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;
  15. }

以上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.  class="group" style="display:inline" id='<%#String.Format("customer{0}",Container.DataItemIndex) %>' 
  5. onclick='showhide(<%#String.Format("\"#customer{0}\"",Container.DataItemIndex) %>,
  6. <%#String.Format("\"#order{0}\"",Container.DataItemIndex) %>,
  7. <%#String.Format("\"{0}\"",Eval("CustomerID")) %>)'>
  8.  ID="imgCollapsible" CssClass="first" ImageUrl="~/Assets/img/plus.png"
  9. Style="margin-right: 5px;" runat="server" /> class="header">
  10. <%#Eval("CustomerID")%>:
  11. <%#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. //First child of master div is the image
    4. var src = $(master).children()[0].src;
    5. //Switch image from (+) to (-) or vice versa.
    6. if(src.endsWith("plus.png"))
    7. srcsrc = src.replace('plus.png','minus.png');
    8. else
    9. srcsrc = src.replace('minus.png','plus.png');
    10. //if the detail DIV is empty Initiate AJAX Call, if not that means DIV already populated with data             
    11. if($(detail).html() == "")
    12. {
    13. //Prepare Progress Image
    14. var $offset = $(master).offset();
    15. $('#progress').css('visibility','visible');
    16. $('#progress').css('top',$offset.top);
    17. $('#progress').css('left',$offset.left+$(master).width());                    
    18. //Prepare Parameters
    19. var params = '{customerId:"'+ customerId +'"}';                    
    20. //Issue AJAX Call
    21. $.ajax({
    22. type: "POST", //POST
    23. url: "GridViewDrillDownjQueryAjax.aspx/GetOrders", //Set call to Page Method
    24. data: params, // Set Method Params
    25. beforeSend: function(xhr) {
    26. xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");},
    27. contentType: "application/json; charset=utf-8", //Set Content-Type
    28. dataType: "json", // Set return Data Type
    29. success: function(msg, status) {
    30. $('#progress').css('visibility','hidden');
    31. $(master).children()[0].src = src;
    32. $(detail).html(msg);
    33. $(detail).slideToggle("normal"); // Succes Callback
    34. },
    35. error: function(xhr,msg,e){
    36. alert(msg);//Error Callback
    37. }
    38. });
    39. }
    40. else
    41. {
    42. //Toggle expand/collapse                   
    43. $(detail).slideToggle("normal");
    44. $(master).children()[0].src = src;
    45. }
    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

    链接:http://www.cnblogs.com/ywqu/archive/2009/09/06/1561420.html

    新闻名称:浅析在Ajax和jQuery中实现GridView展开与合并
    浏览路径:http://www.mswzjz.cn/qtweb/news43/78293.html

    攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能,是专注品牌与效果的网络营销公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 贝锐智能