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。

 

转载于:https://www.cnblogs.com/zhangjd/p/6203054.html