layui 表套嵌套
layui.config({
base: '../../js/layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'table'], function () {
var admin = layui.admin;
var form = layui.form;
var table = layui.table;
var $ = layui.$;
var tableindex = table.render({
elem: '#table_test_datalist'
, url: ''
, height: 'full-168'
, cellMinWidth: 80
, method: 'post'
, page: true
, limit: 15
, limits: [10, 15, 20, 30, 40, 50]
, contentType: 'application/json'
, cols: [[
{type: 'numbers', title: '序号', width: 40}
, {field: 'userName', title: '用户名称', event: 'collapse', minWidth: 80, templet: function(d) {
return '
}}
, {field: 'userType', title: '用户类型', minWidth: 80}
]]
}
});
//监听工具条 嵌套表格
table.on('tool(table_test_filter)', function (obj) {
var data = obj.data;
if (obj.event === 'collapse') {
var trObj = layui.$(this).parent('tr'); //当前行
var accordion = true //开启手风琴，那么在进行折叠操作时，始终只会展现当前展开的表格。
var content = '
//表格行折叠方法
collapseTable({
elem: trObj,
accordion: accordion,
content: content,
success: function (trObjChildren, index) { //成功回调函数
//trObjChildren 展开tr层DOM
//index 当前层索引
trObjChildren.find('table').attr("id", index);
table.render({
elem: "#" + index,
url: '',
limit: 3,
cellMinWidth: 80,
method: 'post',
contentType: 'application/json',
where: {},
cols: [[
{type: 'numbers', title: '序号', width: 40}
, {field: 'userName', title: '用户名称', minWidth: 160}
, {field: 'userNccounts', title: '帐号', minWidth: 80}
]]
});
}
});
}
});
});
function collapseTable(options) {
var trObj = options.elem;
if (!trObj) return;
var accordion = options.accordion,
success = options.success,
content = options.content || '';
var tableView = trObj.parents('.layui-table-view'); //当前表格视图
var id = tableView.attr('lay-id'); //当前表格标识
var index = trObj.data('index'); //当前行索引
var leftTr = tableView.find('.layui-table-fixed.layui-table-fixed-l tr[data-index="' + index + '"]'); //左侧当前固定行
var rightTr = tableView.find('.layui-table-fixed.layui-table-fixed-r tr[data-index="' + index + '"]'); //右侧当前固定行
var colspan = trObj.find('td').length; //获取合并长度
var trObjChildren = trObj.next(); //展开行Dom
var indexChildren = id + '-' + index + '-children'; //展开行索引
var leftTrChildren = tableView.find('.layui-table-fixed.layui-table-fixed-l tr[data-index="' + indexChildren + '"]'); //左侧展开固定行
var rightTrChildren = tableView.find('.layui-table-fixed.layui-table-fixed-r tr[data-index="' + indexChildren + '"]'); //右侧展开固定行
var lw = leftTr.width() + 15; //左宽
var rw = rightTr.width() + 15; //右宽
//不存在就创建展开行
if (trObjChildren.data('index') != indexChildren) {
//装载HTML元素
var tr = '
trObjChildren = trObj.after(tr).next().hide(); //隐藏展开行
var fixTr = '
leftTrChildren = leftTr.after(fixTr).next().hide(); //左固定
rightTrChildren = rightTr.after(fixTr).next().hide(); //右固定
}
//展开|折叠箭头图标
trObj.find('td[lay-event="collapse"] i.layui-colla-icon').toggleClass("layui-icon-right layui-icon-down");
//显示|隐藏展开行
trObjChildren.toggle();
//开启手风琴折叠和折叠箭头
if (accordion) {
trObj.siblings().find('td[lay-event="collapse"] i.layui-colla-icon').removeClass("layui-icon-down").addClass("layui-icon-right");
trObjChildren.siblings('[data-index$="-children"]').hide(); //展开
rightTrChildren.siblings('[data-index$="-children"]').hide(); //左固定
leftTrChildren.siblings('[data-index$="-children"]').hide(); //右固定
}
success(trObjChildren, indexChildren); //回调函数
heightChildren = trObjChildren.height(); //展开高度固定
rightTrChildren.height(heightChildren + 115).toggle(); //左固定
leftTrChildren.height(heightChildren + 115).toggle(); //右固定
}
}