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:  },

            { field: 'DAKEYCODE', title: '权限编码', width:  },

            { field: 'MEMO', title: '描述信息', width:  },

            { field: 'DAID', title: '权限ID', width: , 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:  },

                        { field: 'TRANSFERCODE', title: '转换编码', width:  },

                        { field: 'MEMO', title: '权限描述顺序', width:  },

                        { field: 'DAID', title: 'DAID', width: , hidden: 'true' },

                        { field: 'DAITEMID', title: 'DAITEMID', width: , hidden: 'true' }

                    ]],

                    onResize: function () {

                        $('#tbDataAuthority').datagrid('fixDetailRowHeight', index);

                    },

                    onLoadSuccess: function () {

                        setTimeout(function () {

                            $('#tbDataAuthority').datagrid('fixDetailRowHeight', index);

                        }, );

                    }

                });

                $('#tbDataAuthority').datagrid('fixDetailRowHeight', index);

            }

        })

四、解析

当用户点击展开按钮（'+'）时，'onExpandRow' 事件将被触发，就会渲染一个子DataGrid。