數據網格詳細視圖，如圖
一、頁面上引入腳本
<script src="~/jquery-easyui-datagridview/jquery-easyui-datagridview/datagrid-detailview.js"></script> 可以百度下載
二、寫table
<body>
<div style="height:300px">
<table id="dg" style="width:700px;height:250px" >
</table>
</div>
</body> <script type="text/javascript">
$(function () {
$('#dg').datagrid({
fit: true,
striped: true, //斑馬線
title: "訂單信息",
rownumbers: true,
singleSelect: true,
idField: 'ID',
columns: [[
{ field: 'ID', title: '編號', width: 80, halign: 'center', hidden: 'true' },
{ field: 'Username', title: '商戶名稱', width: 100, halign: 'center', },
{ field: 'OrderCode', title: '訂單號', width: 200, halign: 'center', },
{ field: 'Date', title: '日期', width: 100, halign: 'center', formatter: DateTimeFormatter },
]],
toolbar: "#tool",
url: "@Url.Action("Get")",
pagination: true, //是否分頁
pageSize: 5,
pageList: [5, 10, 15, 20],
sortName: 'ID',
sortOrder: 'desc',
view: detailview, //視圖類型爲詳細視圖
detailFormatter: function (index, row) { //返回行明細內容的格式化函數。
return '<div style="padding:2px; height:50px""><table class="ddv"></table></div>';
},
onExpandRow: function (index, row) { //當展開一行時觸發。
var ddv = $(this).datagrid('getRowDetail', index).find('table.ddv');
ddv.datagrid({
url: '@Url.Action("GetOrderDetail")?ID=' + row.ID,
fitColumns: true,
singleSelect: true,
rownumbers: true,
loadMsg: '',
height: 'auto',
columns: [[
{ field: 'ID', title: '編號', width: 100 },
{ field: 'ColorName', title: '顏色', width: 100 },
{ field: 'Price', title: '單價', width: 100 },
{ field: 'Count', title: '數量', width: 100 },
{ field: 'ProName', title: '商品名稱', width: 200 },
{ field: 'SizeName', title: '鞋碼', width: 100 }
]],
onResize: function () {
$('#dg').datagrid('fixDetailRowHeight', index); //fixDetailRowHeight當展開一行時觸發。
},
onLoadSuccess: function () {
setTimeout(function () {
$('#dg').datagrid('fixDetailRowHeight', index);
}, 0);
}
});
$('#dg').datagrid('fixDetailRowHeight', index);
}
});
})
</script> public override ActionResult Get(int rows, int page, Order model)
{
int count;
var list = Bll.Search(model, true, x => x.ID, rows,page,out count).Select(x => new { x.ID,x.OrderCode,x.CusId,Username=x.Users.Name,x.Date}).ToList();
return Json(new { total = count, rows = list });
}
public ActionResult GetOrderDetail(int ID)
{
OrderDetailBll bll = new OrderDetailBll();
var list = bll.Search(x=>x.OrderID==ID).Select(x => new { x.ID,ColorName=x.Color.Name,x.Count,x.Price,ProName=x.Product.Name,SizeName=x.Size.Name }).ToList();
return Json(new { total = list.Count(), rows = list },JsonRequestBehavior.AllowGet);
}