最近做的项目中要实现一项功能，如下：

本来是想用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