思路其实很简单，没什么高大上的。就是通过监听表格的点击得到当前tr的下标，然后在其后面插入一个tr,把里面的td合并成一个用于存放下级table。限于本人实力低微，从来都没有试过去封装模块，下面代码只是实现了基本的展开功能，后续有时间会继续优化，欢迎大佬指点。
有图有真相
M3YV31LSI$2XI2V8UM3VV43.png
![20183P48@R4ZQGJ])3@$$P.png
代码
首先需要指定一个容器
//主要的实现代码被我封装到 layui 拓展模块 ntable 中，所以在使用的时候需要引入模块
//相关配置
layui.config({
// 配置 layui 第三方扩展组件存放的基础目录
base: '../opTable'
}).extend({
ntable: '/ntable'
}).use(['ntable'], function () {
var ntable = layui.ntable;
//一样以render（）为入口，传入容器id,和option 数组，表格会以数组元素的顺序进行嵌套
ntable.render('#box',
[
{
elem: '#laytable'
, id: 'laytable'
, url: 'static/test.json'
, cols: [[
{field: 'id', title: 'ID', sort: true}
, {field: 'username', title: '用户名', edit: true}
, {field: 'city', title: '城市', edit: true}
]],
},
{
elem: '#table2'
, id: 'table2'
, url: 'static/test.json'
, page: true
, cols: [[
{field: 'id', title: 'ID'}
, {field: 'username', title: '用户名'}
, {field: 'logins', title: '登录名'}
, {field: 'city', title: '城市'}
, {field: 'classify', title: '职业'}
]]
},
{
elem: '#table3'
, id: 'table3'
, url: 'static/test.json'
, page: true
, cols: [[
{field: 'id', title: 'ID'}
, {field: 'username', title: '用户名'}
, {field: 'logins', title: '登录名'}
, {field: 'city', title: '城市'}
, {field: 'classify', title: '职业'}
, {field: 'wealth', title: '财产值'}
, {field: 'experience', title: '人气值'}
, {field: 'score', title: '分数'}
, {title: '操作',}
]],
},
{
elem: '#table44'
, id: 'table44'
, url: 'static/test.json'
, page: true
, cols: [[
{field: 'id', title: 'ID'}
, {field: 'username', title: '用户名'}
, {field: 'logins', title: '登录名'}
, {field: 'city', title: '城市'}
, {field: 'classify', title: '职业'}
, {field: 'wealth', title: '财产值'}
, {field: 'experience', title: '人气值'}
, {field: 'score', title: '分数'}
, {title: '操作',}
]],
},
]
);
})
//ntable.js
/**
@ Name：
@ Author：lsf
@ License：
*/
layui.define(['form', 'table'], function(exports) {
var $ = layui.$,
table = layui.table,
ntable = {};
var options = [];
var arrs = []
function setTable(id, op) {
options = op;
if (options.length == 1) {
table.render(options[0]);
} else {
//除了最后一个其他option 都添加箭头事件
for (let i = 0; i < options.length - 1; i++) {
options[i].cols[0].unshift({
width: 50,
title: '',
templet: function(d) {
return '';
}
})
}
$(id).append("
");
table.render(options[0]);
table.on('tool(' + options[0].id + ')', function(obj) {
var data = obj.data;
var index = $(this).data('index');
var trindex = obj.tr[0].dataset.index;
let option = $.extend(true, {}, options[1]);
option.elem = options[1].elem + trindex
option.id = options[1].id + trindex
if (obj.event === 'openicon_'+options[0].id+'0') {
tableon(this, options[0].id, 1, trindex)
}
})
}
}
function tableon(iconelem, outTableId, optionIndex, trIndex) {
let inserTableId = options[optionIndex].id + trIndex //展开的tableid
if ($(iconelem).hasClass('layui-icon-right')) {
let tablehtml =
`
`;
let option = $.extend(true, {}, options[optionIndex]);
option.elem = '#' + inserTableId
option.id = inserTableId
$(iconelem).parent('div').parent('td').parent('tr').parent('tbody').find('.tableicon' + (optionIndex - 1)).removeClass(
'layui-icon-down').addClass('layui-icon-right')
$(iconelem).parent('div').parent('td').parent('tr').parent('tbody').find('.newtablebox' + (optionIndex - 1)).remove()
$(iconelem).removeClass('layui-icon-right').addClass('layui-icon-down')
$(iconelem).parent('div').parent('td').parent('tr').after(tablehtml)
let intablewidth = $(`.newtablebox${optionIndex-1}`).width();
$(`.newtablebox${optionIndex-1} .insert_box,.newtablebox${optionIndex-1} td`).css('width',intablewidth)
table.render(option)
} else {
$(iconelem).removeClass('layui-icon-down').addClass('layui-icon-right')
$(iconelem).parent('div').parent('td').parent('tr').next('tr').remove();
}
table.on('tool(' + inserTableId + ')', function(obj) {
var data = obj.data;
var tableid = $(this).data('tableid');
var index = $(this).data('index');
var trindex = obj.tr[0].dataset.index;
let option = $.extend(true, {}, options[index + 1]);
option.elem = options[index + 1].elem + trindex
option.id = options[index + 1].id + trindex
if(tableid == options[optionIndex].id){ //发生冒泡时id 会不相同，以此来阻断冒泡行为
if (obj.event === 'openicon_' +options[index].id + index) {
tableon(this, options[index].id, index + 1, trindex)
}
}
})
}
ntable.render = function(id, options) {
if (options && options.length > 0) {
setTable(id, options);
} else {
return;
}
}
exports('ntable', ntable);
});