EasyUI DataGrid - 嵌套的DataGrid
实现效果:
一、在页面头部引用视图脚本JS文件
<script src="@Url.Content("~/Resources/EasyUI/plugins/datagrid-detailview.js")" type="text/javascript"></script>
二、创建主DataGrid视图
<div id="table"> <table id="tbDataAuthority"></table> </div>
三、设置详细DataGrid 显示
$('#tbDataAuthority').datagrid({ striped: true, url: '/User/BindDataAuthorityGrid', iconCls: 'icon-edit', //图标 singleSelect: true, autoRowHeight: false, rownumbers: true, fitColumns: true, border: false, pagination: true, //是否分页 columns: [[ { field: 'DANAME', title: '权限名称', width: 50 }, { field: 'DAKEYCODE', title: '权限编码', width: 50 }, { field: 'MEMO', title: '描述信息', width: 50 }, { field: 'DAID', title: '权限ID', width: 50, hidden: true }, ]], view: detailview, detailFormatter: function (index, row) { return '<div style="padding:5px"><table id="tbDataAuthorityItem-' + index + '"></table></div>'; }, onExpandRow: function (index, row) { $('#tbDataAuthorityItem-' + index).datagrid({ url: '/User/BindDetailGridListByDaId/?daId=' + row.DAID, fitColumns: true, singleSelect: true, rownumbers: true, loadMsg: '', height: 'auto', columns: [[ { field: 'DAITEMNAME', title: '权限名称', width: 50 }, { field: 'TRANSFERCODE', title: '转换编码', width: 50 }, { field: 'MEMO', title: '权限描述顺序', width: 50 }, { field: 'DAID', title: 'DAID', width: 50, hidden: 'true' }, { field: 'DAITEMID', title: 'DAITEMID', width: 50, hidden: 'true' } ]], onResize: function () { $('#tbDataAuthority').datagrid('fixDetailRowHeight', index); }, onLoadSuccess: function () { setTimeout(function () { $('#tbDataAuthority').datagrid('fixDetailRowHeight', index); }, 0); } }); $('#tbDataAuthority').datagrid('fixDetailRowHeight', index); } })
四、解析
当用户点击展开按钮('+')时,'onExpandRow' 事件将被触发,就会渲染一个子DataGrid。