layui 表格嵌套
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="shared/_layout::header('后台管理登录')">
</head>
<body>
<table class="layui-hide" id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
</script>
<script type="text/html" id="barDemo1">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
</script>
<script>
layui.use([ 'laydate', 'laypage', 'layer', 'table', 'carousel','upload', 'element', 'slider' ],
function() {
var table = layui.table; //表格
var parentid =0;
table.render({
elem : '#demo',
height : 670,
url : '/dept/list',
method : 'post',
where: {parentid},
parseData : function(res) { //res 即为原始返回的数据
return {
"code" : 0, //解析接口状态
"msg" : res.message, //解析提示文本
"count" : res.total, //解析数据长度
"data" : res.rows//解析数据列表
};
},
title : '用户表',
page : true,
cols : [ [ //表头
{field : 'sort',title : '排序',width : 90,sort : true},
{field : 'name',title : '名称',width : 150,event : 'collapse',templet : function(d) {
return '<div style="position: relative;\n' + ' padding: 0 10px 0 20px;">'+ d.name
+ '<i style="left: 0px;" lay-tips="展开" class="layui-icon layui-colla-icon layui-icon-right"></i></div>'
}},
{fixed : 'right',width : 80,align : 'center',toolbar : '#barDemo'}
] ]
});
table.on('tool(test)',function(obj) {
var data = obj.data;
alert('ID' +data.id);
var parentid=data.id;
if (obj.event === 'collapse') {
var trObj = layui.$(this).parent('tr'); //当前行
var accordion = true //开启手风琴，那么在进行折叠操作时，始终只会展现当前展开的表格。
var content = '<table></table>' //内容
//表格行折叠方法
collapseTable({
elem : trObj,
parentid:parentid,
accordion : accordion,
content : content,
success : function(trObjChildren,index) { //成功回调函数 trObjChildren 展开tr层DOM index 当前层索引
trObjChildren.find('table').attr("id",index);
table.render({
elem : "#"+ index,
method : 'post',
url : '/dept/list',
where: {parentid},
parseData : function(res) { //res 即为原始返回的数据
return {
"code" : 0, //解析接口状态
"msg" : res.message, //解析提示文本
"count" : res.total, //解析数据长度
"data" : res.rows//解析数据列表
};
},page : true,
cellMinWidth : 80,
cols : [ [
{field : 'sort',title : '排序',width : 80,},
{field : 'name',title : '名称',width : 80,},
{fixed : 'right',title:'操作',width : 80,align : 'center',toolbar : '#barDemo1'}
] ]
});
}
});
}
});
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'); //当前行索引
alert('index =' + 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; //右宽
//不存在就创建展开行
alert('indexChildren =' + indexChildren);
alert('indexChildren =' + trObjChildren.data('index'));
if (trObjChildren.data('index') != indexChildren) {
//装载HTML元素
alert('hahah =');
var tr = '<tr data-index="' + indexChildren + '"><td colspan="' + colspan + '"><div style="height: auto;padding-left:'
+ lw + 'px;padding-right:' + rw + 'px" class="layui-table-cell">'
+ content + '</div></td></tr>';
trObjChildren = trObj.after(tr).next().hide(); //隐藏展开行
var fixTr = '<tr data-index="' + indexChildren + '"></tr>';//固定行
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(); //右固定
}
});
</script>
</body>
</html>
来源：CSDN
作者：安。
链接：https://blog.csdn.net/weixin_42439225/article/details/103990229