行のネストされた Web グリッドが必要です。通常のグリッドビューについては、以下のリンクのようなものです。
http://csharpdotnetfreak.blogspot.com/2012/06/nested-gridview-example-in-aspnet.html
次のような列のネストされた Web グリッドのみを見つけることができました。
http://www.dreamincode.net/forums/topic/229962-mvc-3-webgrid-inside-a-webgrid/
これに対する解決策はありますか??
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 : get View のアクションを書く
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>
}