参考原文链接：https://blog.csdn.net/jackson_hou03/article/details/97894817
<!DOCTYPE html>
<html>
<head th:replace="header :: header(~{::title})">
<title>权限菜单管理</title>
</head>
<body>
<style>
body {
margin: 0px;
}
a {
text-decoration-line: none;
}
</style>
<div class="layui-body" style="top: -10px;left: 0px">
<table class="layui-hide" id="demo" lay-filter="test"></table>
</div>
<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.config({
version: '1545041465443' //为了更新 js 缓存，可忽略
});
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'],
function () {
var table = layui.table //表格
//执行一个 table 实例
table.render({
elem: '#demo',
height: 569,
parseData: function (r) {
return {
"code": 0
, "msg": ""
, "count": "1000"
, "data": r
}
},
url: '/menu/dataGrid',
title: '用户表',
page: true,
cols: [
[
{
type: 'checkbox',
fixed: 'right'
},
{
field: 'name',
title: '权限菜单名称',
width: 180,
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>'
}
},
{
field: 'code', width: 150,
title: '代码标识'
},
{
field: 'pid', width: 80,
title: 'PID'
},
{
field: 'url',
title: 'URL',
width: 200
},
{
field: 'iconCls', width: 180,
title: '图标'
},
{
field: 'type', width: 80,
title: '类型'
},
{
field: 'seq', width: 80,
title: '排序'
},
{
fixed: 'right',
width: 80,
align: 'center',
toolbar: '#barDemo'
}]
]
});
//监听工具条
table.on('tool(test)',
function (obj) {
var data = obj.data;
console.info("data:" + JSON.stringify(data.childMenu[2]));
if (obj.event === 'collapse') {
var trObj = layui.$(this).parent('tr'); //当前行
var accordion = true //开启手风琴，那么在进行折叠操作时，始终只会展现当前展开的表格。
var content = '<table></table>' //内容
//表格行折叠方法
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: '/menu/getMenuByPid?pid=' + data.id,
limit: 3,
parseData: function (r) {
console.log(r);
return {
"code": 0
, "msg": ""
, "count": "1000"
, "data": r
}
},
cols: [
[{
type: 'checkbox',
fixed: 'right'
},
{
field: 'name',
title: '权限菜单名称',
width: 180
},
{
field: 'code', width: 150,
title: '代码标识'
},
{
field: 'pid', width: 80,
title: 'PID'
},
{
field: 'url',
title: 'URL',
width: 200
},
{
field: 'iconCls', width: 180,
title: '图标'
},
{
field: 'type', width: 80,
title: '类型'
},
{
field: 'seq', width: 80,
title: '排序'
},
{
fixed: 'right',
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'); //当前行索引
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 = '<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>
也可以采用layui的模板进行递归
3963
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
