EasyUI 网格 一主多从 从表使用自定义树状展开

                    <table id="Table1" class="easyui-datagrid" title="标题" style=" 100%;"
                        data-options="fitColumns:true,rownumbers:true,singleSelect:true,striped:true,collapsible:true,pagination:true,pageSize:3,pageList:[3,6,9],url:'ajax路径'">
                        <thead>
                            <tr>
                                <th></th>
                            </tr>
                        </thead>
                    </table>

上面是最基本的主表 下面是对应的子表

        <table id="Table_dg" class="easyui-datagrid"
            data-options="fitColumns:true,rownumbers:true,singleSelect:true,striped:true,collapsible:true,url:'ajax路径'">
            <thead>
                <tr>
                    <th data-options="field:'字段名'"></th>
                </tr>
            </thead>
        </table>

这里用到了一个插件 需要引入一个js包  jquery-easyui-datagridview

接下来是对应的js代码

            $('Table1').datagrid({
                onSelect: function (index, rowdata) {//用户选择一行时触发，index下标 rowdata被选中行数据 singleSelect 只能选中一行

                    //获取到子表的数据
                    $('#Table_dg').datagrid({
                        view: view,//展示视图
                        url: '',//ajax请求的地址
                        queryParams: {//需要传递的多个参数

                        },
                        detailFormatter: function (index, row) {//扩展行展示数据 告诉用户 具体返回是的是个什么样子的容器
                            return '<div></div>';
                        },
                        onLoadSuccess: function () {//当数据载入成功时触发
                            var row = $("#Table_dg").datagrid("getRows");//返回当前页的记录
                            for (var r = 0; r < row.length; r++) {
                                $("#Table_dg").datagrid("expandRow", r);//展开对应行
                            }
                            $('#Table_dg').datagrid('collapseGroup');//自动修正高度,但是会出BUG,所以加上一个折叠的动作，直接样式就fix完毕
                        },
                        onExpandRow: function (index, row) {//多层列表定义  
                            var ddv = $(this).datagrid('getRowDetail', index).find('刚才在扩展行写的内容');//获取到扩展行的容器
                            ddv.datagrid({//获取到子表的从表的数据
                                queryParams: {//传递的多个参数

                                },
                                url: "",//ajax 访问的地址
                                fitColumns: true,//自动填满宽度
                                singleSelect: true,//只能选中单行
                                rownumbers: true,//排序
                                loadMsg: '',//加载中提示信息
                                height: 'auto',//高度自适应
                                columns: [[//对应列绑定数据
                                { field: '后台传过来的对应的数据', title: '抬头' },
                                ]],
                                onResize: function () {//该事件获取高度宽度 可进行调整
                                    $('#Table_dg').datagrid('fixDetailRowHeight', index);
                                    $('#Table_dg').datagrid('collapseGroup');//自动修正高度,但是会出BUG,所以加上一个折叠的动作，直接样式就fix完毕
                                },
                                onLoadSuccess: function () {//数据载入成功触发
                                    $('#Table_dg').datagrid('collapseGroup');//自动修正高度,但是会出BUG,所以加上一个折叠的动作，直接样式就fix完毕
                                    setTimeout(function () {
                                        $('#Table_dg').datagrid('fixDetailRowHeight', index);
                                    }, 0);
                                }
                            });
                            $('#Table_dg').datagrid('fixDetailRowHeight', index);
                            $('#Table_dg').datagrid('collapseGroup');//自动修正高度,但是会出BUG,所以加上一个折叠的动作，直接样式就fix完毕
                        }
                    });
                }
            });

对于展开的多层表格进行单行选择操作

            $("按钮").click(function () {
                var details = [];
                var detail;
                for (var i = 0; i < $('.ddv').length; i++) {
                    detail = $('.ddv').eq(i).datagrid('getSelected');//通过判断每个表格选中行的值 
                    if (detail != null) {
                        details.push(detail);//将被选中的行的值填充进数组中
                    }
                }
                if (details.length > 1) {//如果数组长度大于1 说明有多条数据被选中 提示用户 以及刷新选中状态
                    alert("只能选取一条数据");
                    //自动取消选择状态
                    $('#Table_dg').datagrid('rejectChanges');
                    editIndex = undefined;
                }
                else {//一条数据
                    var row = details[0];
                    if (row) {
                      //弹窗什么的
                    }
                    else alert("请选择一条记录进行编辑！");
                }
            });

类似于下图 信息不方便透露

下面的从表是可以像树状图那种 折叠展开的 这里设置的是 多个从表只能单选一行数据