1、插件地址：https://gitee.com/grapess/layui
2、树形表格前端
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button id="add" lay-event="addPermission" class="layui-btn layui-btn-sm btnys">添加</button>
<button class="layui-btn layui-btn-sm" lay-event="btn-expand">全部展开</button>
<button class="layui-btn layui-btn-sm" lay-event="btn-fold">全部折叠</button>
<button class="layui-btn layui-btn-sm" lay-event="btn-refresh">刷新表格</button>
</div>
</script>
<div class="xm">
<div class="xm-d2">
<div class="xm-d2-hang2">
<table id="permissionTable" class="layui-table" lay-filter="permissionTable"></table>
</div>
</div>
</div>
<script>
$(document).ready(function () {
layui.config({
base : '/layui/'
}).extend({
treetable : 'treetable-lay/treetable'
});
// 存放拓展模块的根目录
layui.use(['treetable', 'table', 'layer'], function () {
var table = layui.table;
var layer = layui.layer;
var treetable = layui.treetable;
//渲染表格
var renderTable = function () {
layer.load(2); //加载层
treetable.render({
height: 'full-160',
id: 'menu',
treeColIndex: 1, //树形图标显示在第几列
treeSpid: '0', //最上级的父级id
treeIdName: 'id', //id字段的名称
treePidName: 'parentId', //父级节点字段
treeDefaultClose: false, //是否默认折叠
treeLinkage: false, //父级展开时是否自动展开所有子级
elem: '#menu', //表格id
url: "",
toolbar: '#toolbarDemo',
page: false,
cols: [[
{type: 'radio'},
{field: 'name', title: '菜单名称'},
{field: 'url', title: '地址'},
{field: 'icon', hide: true, title: '图标'},
{field: 'idx', title: '排序'}
]],
//数据渲染完的回调
done: function () {
//关闭加载
layer.closeAll('loading');
}
})
};
renderTable();
});
})
</script>
3、后台数据结构
{ "msg": "true", "code": 0, "data": [{ "Id": 1, "cName": "开发部", "cType": null, "icon": null, "pid": 0, "seq": 0, "resType": "0" }, { "Id": 2, "cName": "第一组", "cType": "开发部", "icon": null, "pid": 1, "seq": 1, "resType": "1" }, { "Id": 3, "cName": "第二组", "cType": "开发部", "icon": null, "pid": 1, "seq": 2, "resType": "1" }, { "Id": 4, "cName": "运营部", "cType": "运营部", "icon": null, "pid": 1, "seq": 3, "resType": "1" }, { "Id": 5, "cName": "第一组", "Type": "运营部", "icon": null, "pid": 1, "seq": 4, "resType": "1" }, { "Id": 6, "cName": "第一组", "cType": "运营部", "icon": null, "pid": 1, "seq": 5, "resType": "1" }], "count": 6 }
实现效果如下：
4、新增时下拉框树形
前端代码
<input type="text" id="tree" lay-filter="tree" class="layui-input">
<script>
layui.config({
base:"/layui/module/"
}).extend({treeSelect:"treeSelect/treeSelect"});
layui.use(['treeSelect','form'],function () {
var treeSelect=layui.treeSelect;
treeSelect.render({
// 选择器
elem:'#tree',
// 数据
data:url ,
// 异步加载方式：get/post，默认get
type:'get',
// 占位符
placeholder:'请选择',
// 是否开启搜索功能：true/false，默认false
search:true,
style:{
line: {// 连接线
enable:true // 是否开启：true/false
},
folder: {// 父节点图标
enable:true // 是否开启：true/false
},
},
// 点击回调
click:function(d){
console.log(d);
},
// 加载完成后的回调函数
success:function (d) {
console.log(d);
// 选中节点，根据id筛选
treeSelect.checkNode('tree',1);
// 获取zTree对象，可以调用zTree方法
var treeObj =treeSelect.zTree('tree');
console.log(treeObj);
// 刷新树结构
treeSelect.refresh();
}
});
});
</script>
后台返回数据结构
[ { "id": 1, "name": "zzz", "open": true, "children": [ { "id": 2, "name": "1", "open": false, "checked": true }, { "id": 3, "name": "2", "open": false, "checked": true }, { "id": 17, "name": "3z", "open": false, "checked": true } ], "checked": true }, { "id": 4, "name": "评论", "open": false, "children": [ { "id": 5, "name": "留言列表", "open": false, "checked": false }, { "id": 6, "name": "发表留言", "open": false, "checked": false }, { "id": 333, "name": "233333", "open": false, "checked": false } ], "checked": false }, { "id": 10, "name": "权限管理", "open": false, "children": [ { "id": 8, "name": "用户列表", "open": false, "children": [ { "id": 40, "name": "添加用户", "open": false, "url": null, "title": "40", "checked": false, "level": 2, "check_Child_State": 0, "check_Focus": false, "checkedOld": false, "dropInner": false, "drag": false, "parent": false }, { "id": 41, "name": "编辑用户", "open": false, "checked": false }, { "id": 42, "name": "删除用户", "open": false, "checked": false } ], "checked": false }, { "id": 11, "name": "角色列表", "open": false, "checked": false }, { "id": 13, "name": "所有权限", "open": false, "children": [ { "id": 34, "name": "添加权限", "open": false, "checked": false }, { "id": 37, "name": "编辑权限", "open": false, "checked": false }, { "id": 38, "name": "删除权限", "open": false, "checked": false } ], "checked": false }, { "id": 15, "name": "操作日志", "open": false, "checked": false } ], "checked": false } ]
效果如下：
