asp.net-mvc-4 - 带有展开/折叠 MVC4 的行嵌套 WebGrid

Question

我想要一个行嵌套的 webgrid。类似于下面链接中的普通gridview的东西。

http://csharpdotnetfreak.blogspot.com/2012/06/nested-gridview-example-in-aspnet.html

我只能找到如下的列嵌套 webgrids：

剃刀嵌套webgrid中的格式化

http://www.dreamincode.net/forums/topic/229962-mvc-3-webgrid-inside-a-webgrid/

有什么解决办法吗？

Answer 1

现在在 MVC 框架中，我们可以完全控制 HTML。所以，我们可以很容易地创建一个显示嵌套表格数据的视图。有关完整指南，请访问如何在 ASP.NET MVC4 中使用展开/折叠创建嵌套 WebGrid 。

假设我们有一个 OrderMaster 和 OrderDetails 数据，需要在表格中显示订单，当点击该行时将显示订单详细信息...

步骤 1. 创建 ViewModel

            public class OrderVM
            {
                public OrderMaster order { get; set; }
                public List<OrderDetail> orderDetails { get; set; }
            }

第 2 步：为获取视图编写操作

public ActionResult List()
        {
            List<OrderVM> allOrder = new List<OrderVM>();

            // here MyDatabaseEntities is our data context
            using (MyDatabaseEntities dc = new MyDatabaseEntities())
            {
                var o = dc.OrderMasters.OrderByDescending(a => a.OrderID);
                foreach (var i in o)
                {
                    var od = dc.OrderDetails.Where(a => a.OrderID.Equals(i.OrderID)).ToList();
                    allOrder.Add(new OrderVM { order= i, orderDetails = od });
                }
            }
            return View(allOrder);
        }

第 3 步：使用 css 和 js 代码创建视图以用于折叠和展开

    @model IEnumerable<MVCNestedWebgrid.ViewModel.OrderVM>

@{
    ViewBag.Title = "Order List";
    WebGrid grid = new WebGrid(source: Model, canSort: false);
}

<style>
/*Here I will write some css for looks good*/

th, td {
        padding:5px;
    }
    th 
    {
        background-color:rgb(248, 248, 248);        
    }
    #gridT,  #gridT tr {
        border:1px solid #0D857B;
    } 
    #subT,#subT tr {
        border:1px solid #f3f3f3;
    }
    #subT {
        margin:0px 0px 0px 10px;
        padding:5px;
        width:95%;
    }
    #subT th {
        font-size:12px;
    }
    .hoverEff {
        cursor:pointer;
    }
    .hoverEff:hover {
        background-color:rgb(248, 242, 242);
    }
    .expand {
        background-image: url(/Images/pm.png);
        background-position-x: -22px;
        background-repeat:no-repeat;
    }
    .collapse  {
        background-image: url(/Images/pm.png);
        background-position-x: -2px; 
        background-repeat:no-repeat;
    }

</style>




    @model IEnumerable<MVCNestedWebgrid.ViewModel.OrderVM>     
    @{
        ViewBag.Title = "Order List";
        WebGrid grid = new WebGrid(source: Model, canSort: false);
     }

<style>
/*Here I will write some css for looks good*/

th, td {
        padding:5px;
    }
    th 
    {
        background-color:rgb(248, 248, 248);        
    }
    #gridT,  #gridT tr {
        border:1px solid #0D857B;
    } 
    #subT,#subT tr {
        border:1px solid #f3f3f3;
    }
    #subT {
        margin:0px 0px 0px 10px;
        padding:5px;
        width:95%;
    }
    #subT th {
        font-size:12px;
    }
    .hoverEff {
        cursor:pointer;
    }
    .hoverEff:hover {
        background-color:rgb(248, 242, 242);
    }
    .expand {
        background-image: url(/Images/pm.png);
        background-position-x: -22px;
        background-repeat:no-repeat;
    }
    .collapse  {
        background-image: url(/Images/pm.png);
        background-position-x: -2px; 
        background-repeat:no-repeat;
    }

</style>


<div id="main" style="padding:25px; background-color:white;">
    @grid.GetHtml(
    htmlAttributes: new {id="gridT", width="700px" },
    columns:grid.Columns(
            grid.Column("order.OrderID","Order ID"),
            grid.Column(header:"Order Date",format:(item)=> string.Format("{0:dd-MM-yyyy}",item.order.OrderDate)),
            grid.Column("order.CustomerName","Customer Name"),
            grid.Column("order.CustomerAddress","Address"),

            grid.Column(format:(item)=>{
                WebGrid subGrid = new WebGrid(source: item.orderDetails);
                return subGrid.GetHtml(
                    htmlAttributes: new { id="subT" },
                    columns:subGrid.Columns(
                            subGrid.Column("Product","Product"),
                            subGrid.Column("Quantity", "Quantity"),
                            subGrid.Column("Rate", "Rate"),
                            subGrid.Column("Amount", "Amount")
                        )                    
                    );
            })
        )
    )
</div>

@* Here I will add some jquery code for make this nested grid collapsible *@

@section Scripts{
    <script>
        $(document).ready(function () {
            var size = $("#main #gridT > thead > tr >th").size(); // get total column
            $("#main #gridT > thead > tr >th").last().remove(); // remove last column
            $("#main #gridT > thead > tr").prepend("<th></th>"); // add one column at first for collapsible column
            $("#main #gridT > tbody > tr").each(function (i, el) {
                $(this).prepend(
                        $("<td></td>")
                        .addClass("expand")
                        .addClass("hoverEff")
                        .attr('title',"click for show/hide")
                    );

                //Now get sub table from last column and add this to the next new added row
                var table = $("table", this).parent().html();
                //add new row with this subtable
                $(this).after("<tr><td></td><td style='padding:5px; margin:0px;' colspan='" + (size - 1) + "'>" + table + "</td></tr>");
                $("table", this).parent().remove();
                // ADD CLICK EVENT FOR MAKE COLLAPSIBLE
                $(".hoverEff", this).live("click", function () {
                    $(this).parent().closest("tr").next().slideToggle(100);
                    $(this).toggleClass("expand collapse");
                });
            });

            //by default make all subgrid in collapse mode
            $("#main #gridT > tbody > tr td.expand").each(function (i, el) {
                $(this).toggleClass("expand collapse");
                $(this).parent().closest("tr").next().slideToggle(100);
            });

        });
    </script>
}