Refer to
Layui to implement TreeTable (tree data table)
LayUI tree table treetable use detailed
gitee: ele-admin / treetable-lay
The treetable.js and page codes involved in this article can be downloaded here . The gitee code download can be downloaded directly by zip
development background
In the open source project, I saw the menu configuration implemented by layui-treetable. The page is simple, and there is just another menu page in hand that can be optimized (reorganized). However, despite the above three cases, the integration process still has some twists and turns due to reasons such as the incompatibility with the existing business and the version of treetable.js.
Optimization result: the page realized by
the original page treetable
accomplish
Download import treetable.js
The version I use has no css, only a treetable.js, the introduction can refer to the LayUI tree form treetable using the method explained in the opening chapter.
use
HTML page main code
<!-- 数据表格 -->
<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();
})
The data requested by the interface is:
Points to note: You need to modify the corresponding code in treetable.js. The following is the same as the type returned by the above interface after modification. The original code uses the code to judge whether the request is successful. The data uses data, so if your data uses other Field, the data here should also be changed to your corresponding field. The
above js part of the code is mainly changed to the following two, and changed to be consistent with your own data
idName: 'code',//父ID
pidName: 'parentCode',//子ID