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 });
类似于下图 信息不方便透露
下面的从表是可以像树状图那种 折叠展开的 这里设置的是 多个从表只能单选一行数据