1、插件地址:https://gitee.com/grapess/layui
2、树形表格前端
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、新增时下拉框树形
下拉选择器使用文档
前端代码
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();
}
});
});
后台返回数据结构
[ { "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 } ]
效果如下: