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

                     <table id="Table1" class="easyui-datagrid" title="标题" style="width: 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("请选择一条记录进行编辑！");
                 }
             });

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

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