参考
Layui实现TreeTable(树形数据表格)
LayUI树形表格treetable使用详解
gitee：ele-admin / treetable-lay
文中涉及的treetable.js、页面代码都可以在这下载gitee代码下载，直接zip下载即可
在开源项目看到layui-treetable实现的菜单配置，页面简洁，手上刚好又有个菜单页面可以进行优化（整活）。但是尽管已经有上面三个案例，因为和现业务并不是很匹配、treetable.js版本等原因，整合的过程还是有些波折。
优化结果：
原页面
treetable实现的页面
我用的版本是没有css，只有一个treetable.js，引入可以参考 LayUI树形表格treetable使用详解开篇讲的方式。
HTML页面主要代码
<!-- 数据表格 -->
<table class="layui-table" id="menus-table" lay-filter="menus-table"></table>
<!-- 表格操作列 -->
<script type="text/html" id="menusState">
<a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>
js
// 渲染表格
var treemenu = {
reload: function () {
treetable.render({
elem: '#menus-table',
url: serviceBase + '/service/menuWork/list',
// toolbar: 'default',
height: 'full-200',
method:'get',
where: {
name: $("#name").val()
},
tree: {
iconIndex: 2,
isPidData: true,
idName: 'code',//父ID
pidName: 'parentCode',//子ID
openName: 'open',// 是否默认展开的字段名
//public bool open { get; set; }open字段是bool类型
},
// defaultToolbar: ['filter', 'print', 'exports'],
cols: [[
{type: 'numbers'},
{field: 'code', title: '菜单代码', width: 100},
{field: 'name', title: '名称', width: 250},
{field: 'description', title: '描述', width: 200},
{field: 'url', title: '菜单路由'},
{field: 'perCode', title: '权限代码'},
{field: 'icon', title: '图标', align: 'center', width: 100,
templet:'<div><i class="layui-icon {{d.icon}}"></i></div>'
},
{field: 'seqNo', title: '顺序号', align: 'center', width: 110},
{field: 'createTime', title: '创建时间', align: 'center', width: 200},
{toolbar: '#menusState', width: 120, align: 'center', title: '操作'}
]],
style: 'margin-top:0;'
});
treetable.on('tool(menus-table)', function (obj) {
var data = obj.data;
var layEvent = obj.event;
if (layEvent === 'detail') {
layer.open({
type: 2, //type2表示打开iframe层
title: ['详情'], //false表示不显示标题
area: ['800px', '600px'],
shade: 0.1, //是否显示遮罩层
// shadeClose: true, //是否点击遮罩关闭
id: "detail", //设置id防止重复弹出
moveType: 0, //拖拽模式0或者1
content: kiteBase + "page/configure/menu_detail.html?" + $.param({
code: data.code,
icon: data.icon,
})
});
} else if (layEvent === 'edit') {
layer.open({
type: 2, //type2表示打开iframe层
title: ['新增配置'], //false表示不显示标题
area: ['800px', '700px'],
shade: 0.1, //是否显示遮罩层
// shadeClose: true, //是否点击遮罩关闭
id: "edit1", //设置id防止重复弹出
moveType: 0, //拖拽模式0或者1
content: kiteBase + "page/configure/menu_edit.html?" + $.param({
code: data.code,
icon: data.icon,
})
});
}
});
form.render();
}
}
layui.use(['layer', 'form', 'table', 'element', 'treeTable'], function () {
var $ = layui.$;
form = layui.form;
layer = layui.layer;
element = layui.element;
menuPerTable = layui.table;
treetable = layui.treeTable;
treemenu.reload();
menuPer.reload();
})
接口请求的数据为：
注意点： treetable.js中需要修改相应的代码，下面是修改后跟我上面接口返回的type一致，原代码用的code去判断请求是否成功，数据用的是data，所以如果你数据用的是其它字段，这边的data也要改成你相应的字段
上面js部分代码主要改的就下面两个，改成和你自己的数据一致
idName: 'code',//父ID
pidName: 'parentCode',//子ID