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。