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

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

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

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

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

接下来是对应的js代码

 1             $('Table1').datagrid({
 2                 onSelect: function (index, rowdata) {//用户选择一行时触发，index下标 rowdata被选中行数据 singleSelect 只能选中一行
 3
 4                     //获取到子表的数据
 5                     $('#Table_dg').datagrid({
 6                         view: view,//展示视图
 7                         url: '',//ajax请求的地址
 8                         queryParams: {//需要传递的多个参数
 9
10                         },
11                         detailFormatter: function (index, row) {//扩展行展示数据 告诉用户 具体返回是的是个什么样子的容器
12                             return '<div></div>';
13                         },
14                         onLoadSuccess: function () {//当数据载入成功时触发
15                             var row = $("#Table_dg").datagrid("getRows");//返回当前页的记录
16                             for (var r = 0; r < row.length; r++) {
17                                 $("#Table_dg").datagrid("expandRow", r);//展开对应行
18                             }
19                             $('#Table_dg').datagrid('collapseGroup');//自动修正高度,但是会出BUG,所以加上一个折叠的动作，直接样式就fix完毕
20                         },
21                         onExpandRow: function (index, row) {//多层列表定义  
22                             var ddv = $(this).datagrid('getRowDetail', index).find('刚才在扩展行写的内容');//获取到扩展行的容器
23                             ddv.datagrid({//获取到子表的从表的数据
24                                 queryParams: {//传递的多个参数
25
26                                 },
27                                 url: "",//ajax 访问的地址
28                                 fitColumns: true,//自动填满宽度
29                                 singleSelect: true,//只能选中单行
30                                 rownumbers: true,//排序
31                                 loadMsg: '',//加载中提示信息
32                                 height: 'auto',//高度自适应
33                                 columns: [[//对应列绑定数据
34                                 { field: '后台传过来的对应的数据', title: '抬头' },
35                                 ]],
36                                 onResize: function () {//该事件获取高度宽度 可进行调整
37                                     $('#Table_dg').datagrid('fixDetailRowHeight', index);
38                                     $('#Table_dg').datagrid('collapseGroup');//自动修正高度,但是会出BUG,所以加上一个折叠的动作，直接样式就fix完毕
39                                 },
40                                 onLoadSuccess: function () {//数据载入成功触发
41                                     $('#Table_dg').datagrid('collapseGroup');//自动修正高度,但是会出BUG,所以加上一个折叠的动作，直接样式就fix完毕
42                                     setTimeout(function () {
43                                         $('#Table_dg').datagrid('fixDetailRowHeight', index);
44                                     }, 0);
45                                 }
46                             });
47                             $('#Table_dg').datagrid('fixDetailRowHeight', index);
48                             $('#Table_dg').datagrid('collapseGroup');//自动修正高度,但是会出BUG,所以加上一个折叠的动作，直接样式就fix完毕
49                         }
50                     });
51                 }
52             });

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

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

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

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

展开

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

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