新手學EasyUI（八）----SubGrid三級嵌套

最近做的項目中要實現一項功能，如下：

本來是想用tree來實現的，但是無奈時間緊張，能力有限，暫時沒有方法來實現這樣的樹，於是就換了一種方式。在EasyUi中有一種表格可以滿足上面的樣式—–SubGrid表格

STEP1 創建主網格

---

<table id="subDatagrid" style="width: 100%; height: 90%;" data-options="" title="綜合安防系統集成管理平臺">
                            <thead>
                                <tr>
                                    <th data-options="field:'id',checkbox:true,width:20"></th>
                                    <th data-options="field:'right_name',width:935">子系統名稱</th>
                                </tr>
                            </thead>
                        </table>

STEP2 設置詳細視圖來顯示子網格

---

爲了使用詳細視圖，請記得在頁面頭部引用視圖腳本文件。

<script src="../../../Scripts/datagrid-detailview.js"></script>

                //加載grid
                $('#subDatagrid').datagrid({
                    url: "Right.ashx?action=get_parent_right",
                    fitColumns: false,
                    rownumbers: true,//行號
                    view: detailview,
                    detailFormatter: function (index, yeyerow) {   //用以初始化並返回一個DIV容器
                        return '<div style="padding:2px"><table class="' + yeyerow.system_id + 'ddv"></table></div>';
                    },
                    onExpandRow: function (index, yeyerow) {     //展開後觸發事件
                        $('.' + yeyerow.system_id + 'ddv').datagrid({
                            url: 'Right.ashx?action=get_sec_son_right' + '&parent_right=' + yeyerow.right_id + '&system_id=' + yeyerow.system_id,
                            fitColumns: true,
                            rownumbers: true,
                            loadMsg: '加載中...',
                            height: 'auto',
                            columns: [[
                                 { field: 'id', width: 20, checkbox: 'true' },
                                 { field: 'right_name', title: '模塊名稱', width: 100 }
                            ]],
                            onResize: function () {   //事件會在窗口或框架被調整大小時發生
                                $.each($('#subDatagrid').datagrid('getRows'), function (i, row) {
                                    $('#subDatagrid').datagrid('fixRowHeight', i);
                                });
                                $('#subDatagrid').datagrid('fixDetailRowHeight', index);
                            },
                            onLoadSuccess: function () {   //當數據載入成功時觸發
                                clearTimeout(fatherinternalTimer);
                                fatherinternalTimer =
                                setInterval(function () {
                                    $.each($('#subDatagrid').datagrid('getRows'), function (i, row) {
                                        $('#subDatagrid').datagrid('fixRowHeight', i);
                                    });
                                    $('#subDatagrid').datagrid('fixDetailRowHeight', index);
                                }, 10);
                            },
                            view: detailview,
                            detailFormatter: function (index_child, babarow) {    //用以初始化並返回一個DIV容器
                                return '<div style="padding:0px"><table class="' + babarow.right_id + 'ddvv"></table></div>';
                            },
                            onExpandRow: function (index_child, babarow) {   //展開後觸發事件
                                $('.' + babarow.right_id + 'ddvv').datagrid({
                                    url: 'Right.ashx?action=get_sec_son_right' + '&parent_right=' + babarow.right_id + '&system_id=' + babarow.system_id,
                                    fitColumns: true,
                                    rownumbers: true,
                                    loadMsg: '加載中...',
                                    height: 'auto',
                                    columns: [[
                                    { field: 'id', checkbox: 'true', width: 20 },
                                    { field: 'right_name', title: '功能名稱', width: 80 }
                                    ]],
                                    onResize: function () {    //事件會在窗口或框架被調整大小時發生
                                        $.each($('.' + yeyerow.system_id + 'ddv').datagrid('getRows'), function (i, row) {
                                            $('.' + yeyerow.system_id + 'ddv').datagrid('fixRowHeight', i);
                                        });
                                        $.each($('#subDatagrid').datagrid('getRows'), function (i, row) {
                                            $('#subDatagrid').datagrid('fixRowHeight', i);
                                            $('#subDatagrid').datagrid('fixDetailRowHeight', i);
                                        });
                                        //父表格改變大小
                                        $('.' + yeyerow.system_id + 'ddv').datagrid('fixDetailRowHeight', index_child);
                                        //爺爺表格改變大小
                                        $('#subDatagrid').datagrid('fixDetailRowHeight', index);
                                    },
                                    onLoadSuccess: function () {   //當數據載入成功時觸發
                                        $.each($('.' + yeyerow.system_id + 'ddv').datagrid('getRows'), function (i, row) {
                                            $('.' + yeyerow.system_id + 'ddv').datagrid('fixRowHeight', i);
                                        });
                                        $.each($('#subDatagrid').datagrid('getRows'), function (i, row) {
                                            $('#subDatagrid').datagrid('fixRowHeight', i);
                                        });
                                        $('.' + yeyerow.system_id + 'ddv').datagrid('fixDetailRowHeight', index_child);
                                        $('#subDatagrid').datagrid('fixDetailRowHeight', index);
                                        //延遲執行一次後，點擊縮進的話不能恢復原形,所以不用延遲函數，而是使用間隔函數
                                        clearTimeout(soninternalTimer);
                                        soninternalTimer =
                                        setInterval(function () {
                                            $.each($('.' + yeyerow.system_id + 'ddv').datagrid('getRows'), function (i, row) {
                                                $('.' + yeyerow.system_id + 'ddv').datagrid('fixRowHeight', i);
                                            });
                                            $.each($('#subDatagrid').datagrid('getRows'), function (i, row) {
                                                $('#subDatagrid').datagrid('fixRowHeight', i);
                                                $('#subDatagrid').datagrid('fixDetailRowHeight', i);
                                            });
                                            $('.' + yeyerow.system_id + 'ddv').datagrid('fixDetailRowHeight', index_child);
                                            $('#subDatagrid').datagrid('fixDetailRowHeight', index);
                                        }, 5);
                                    }
                                });
                            }
                        });
                    }
                });

當用戶點擊展開按鈕（+）時，onExpandRow事件將被觸發。 我們創建一個新的帶有三列的子網格。 當子網格數據加載成功時或者改變尺寸大小時，請記得對主網格調用 fixDetailRowHeight 方法。

實現的最終效果圖如下：

轉載請註明出處：http://blog.csdn.net/zlts000/article/details/49895011