自定义开发嵌套子表列表手册 自定义开发嵌套子表列表示例效果 ###1.简述 dategrid标签默认嵌套子表列表功能,不够灵活,如果想自定义可以采用下面这种方法。 ###2.实现步骤 第一步:设置t:datagrid标签 isShowSubGrid="false",取消系统默认嵌套子表列表功能; 第二步:在列表页面引用datagrid-detailview.js; ``` <script src="plug-in/easyui/extends/datagrid-detailview.js"></script> ``` 第三步:定义实现js方法,下面是示例代码: ``` //行明细内容的格式化函数。 function detailFormatterFun() { var s = '<div class="orderInfoHidden" style="padding:2px;">' + ' <div class="easyui-tabs" style="height:230px;width:800px;">' + ' <div title="订单明细" style="padding:2px;">' + ' <table class="jfrom_order_linetablelines" ></table>' + ' </div>' + ' </div>' + ' </div>'; return s; } //当展开一行时触发 function onExpandRowFun(index, row) { //把加上的子表tabs和datagrid初始化 var tabs = $(this).datagrid('getRowDetail', index).find('div.easyui-tabs'); tabs.tabs(); var jfrom_order_linetablelines = $(this).datagrid('getRowDetail', index).find('table.jfrom_order_linetablelines'); var jfrom_order_linedurl = 'jfromOrderController.do?jfromOrderLineDatagrid&field=itemName,qty,price,amount&orderid=' + row.id; jfrom_order_linetablelines.datagrid({ singleSelect: true, loadMsg: '正在加载', fitColumns: true, height: '180', pageSize: 50, pageList: [50, 150, 200, 250, 300], border: false, url: jfrom_order_linedurl, idField: 'id', rownumbers: true, pagination: true, columns: [[{ title: '商品名称', field: 'itemName', align: 'left', width: 50 }, { title: '商品数量', field: 'qty', align: 'left', width: 50 }, { title: '商品价格', field: 'price', align: 'left', width: 50 }, { title: '金额', field: 'amount', align: 'left', width: 50 }]] }); } ``` 第四步:利用t:datagrid标签的extendParams属性,绑定自定义js方法: ``` extendParams="view: detailview,detailFormatter:detailFormatterFun,onExpandRow: onExpandRowFun" ```