【项目实战】---Easyui datagrid detailview使用简介

前言：

之前对于esayUI的了解是仅仅是停留在对datagrid的简单应用上，这次有机会了解和学习数据网格详细视图即DataGrid DetailView，还是很有意思的。所谓的数据网格详细视图可以理解为SubGrid即次网格，在网格中还包含着网格，通过点击事件达到折叠或展开的效果。

实现：

1、引入页面样式和脚本

<link rel="stylesheet" href="/Content/easyui.css">
<link rel="stylesheet" href="/Content/icon.css" />
<script type="text/javascript" src="/Scripts/jquery.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/Scripts/datagrid-detailview.js"></script>
<script type="text/javascript" src="/Scripts/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="/Scripts/SalesOrder/SOrderTracking.js"></script>

这里要注意的是引入datagrid-detailview.js。

2、脚本

@*数据列表*@
<table id="SalesOrderGrid" class="easyui-datagrid" style="width:99%;height: 460px" data-options=""></table>

3、具体效果的实现

这部分有3个注意的地方，与直接使用datagrid的不同之处，要多多留心。

//定义数据表
function LoadData(strCusName, strSalesperson, strBeginDate, strEndDate) {
$('#SalesOrderGrid').datagrid({
view: detailview,//注意1
fitColumns: true,
singleSelect: false,
rownumbers: true,
dataType: 'json',
method: 'post',
pagination: true,
pageSize: 10,
pageList: [10, 20, 30],
loadMsg: "正在加载数据,请稍候...",
url: '/CSalesOrder/GetAllSalesOrderInfoByPage',
queryParams: {
strCusName: strCusName,
strSalesperson: strSalesperson,
strBeginDate: strBeginDate,
strEndDate: strEndDate
},
columns: [[
{ field: 'ck', checkbox: true },
{ field: 'ID', title: 'ID', width: 80, align: 'center', hidden: 'true', halign: 'center' },
{ field: 'OrderNumber', title: '订单编号', width: 40, align: 'left', halign: 'center' },
{ field: 'Name', title: '订单名称', width: 50, align: 'left', hidden: 'true', halign: 'center' },
{ field: 'OrderType', title: '订单类型', width: 50, align: 'left', hidden: 'true', halign: 'center' },
{ field: 'ContractNumber', title: '合同号', width: 50, align: 'left', halign: 'center' },
{ field: 'CusID', title: '客户ID', width: 50, align: 'left', hidden: 'true', halign: 'center' },
{ field: 'CusName', title: '客户名称', width: 50, align: 'left', halign: 'center' },
{ field: 'FillOrderDate', title: '填单日期', width: 50, align: 'left', halign: 'center' },
{ field: 'RequestDeliveryDate', title: '要求配送日期', width: 50, align: 'left', halign: 'center' },
{ field: 'State', title: '状态', width: 30, align: 'left', halign: 'center' },
{ field: 'Salesperson', title: '销售员', width: 30, align: 'left', halign: 'center' },
{ field: 'Remark', title: '备注', width: 40, align: 'left', halign: 'center' },
{ field: 'salesOrderDetailsID', title: '订单字表ID', width: 50, align: 'left', hidden: 'true', halign: 'center' },
]],

detailFormatter: function (index, row) {//注意2
return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>';
},
onExpandRow: function (index, row) {//注意3
$('#ddv-' + index).datagrid({
url: '/COrderTracking/GetInvoiceInfoByOrderDetailsID?strOrderDetailsID=' + row.salesOrderDetailsID,
fitColumns: true,
singleSelect: true,
height: 'auto',
columns: [[
{ field: 'ID', title: 'ID', hidden: 'true' },
{ field: 'FID', title: '发运单号', width: 50, align: 'left', halign: 'center' },
{ field: 'PlateNumber', title: '车牌号', width: 50, align: 'left', halign: 'center' },
{ field: 'DeliverUserRealName', title: '司机', width: 50, align: 'left', halign: 'center' },
{ field: 'LoadingTime', title: '装车时间', width: 50, align: 'left', halign: 'center' },
{ field: 'DeliverTime', title: '签收时间', width: 50, align: 'left', halign: 'center' },
{ field: 'State', title: '状态', width: 50, align: 'left', halign: 'center' },
]],
onResize: function () {
$('#SalesOrderGrid').datagrid('fixDetailRowHeight', index);
},
onLoadSuccess: function () {
setTimeout(function () {
$('#SalesOrderGrid').datagrid('fixDetailRowHeight', index);
}, 0);
}
});
$('#SalesOrderGrid').datagrid('fixDetailRowHeight', index);
}

});

}

4、效果

总结：

对用到的主要的属性和事件进行简单说明。属性detailFormatter的类型是function(index,row)，能返回行明细内容的格式化函数。事件onExpandRow的参数要包含index当展开一行时触发。希望小编的这篇文章能够让对Easyui datagrid detailview的使用还不太熟悉的伙伴能有初步的认识。