layui 树 动态加载数据
效果图：
前端样式代码：
<div >
<div id="trees" class="demo-tree demo-tree-box"></div>
</div>
前端js代码：
//引入包
layui.config({
base: '/static/layui-v2.5.6/ext/',// 第三方模块所在目录
version: 'v1.5.10' // 插件版本号
}).extend({
soulTable: 'soulTable/soulTable',
tableChild: 'soulTable/tableChild',
tableMerge: 'soulTable/tableMerge',
tableFilter: 'soulTable/tableFilter',
excel: 'soulTable/excel',
treeGrid:'treegrid/treeGrid'
});
layui.use(['form','layer','tree'], function() {
var form = layui.form;
form.render();
showhslist();//调用数据加载函数
});
function showhslist() {
var postdata ={
menu:$("#menu").val()//对树结构数据进行查询
}
//后台传入地址
dLong.post("/sys/SysPermissionController/getTreeList",postdata,function(data){
if (data.success) {
settreelist(data.treelist)//样式渲染函数
}else
{
dLong.layerMsg(data.msg)
}
},true);
}
function settreelist(data) {
layui.tree.render({
elem: '#trees' //默认是点击节点可进行收缩
,data: data,//数据传递过来
spread: true ,//展开
// accordion: true,
onlyIconControl:true,
showLine: false , //是否开启连接线
click: function(obj){
//数据点击事件
var data = obj.data;
id=data.value;
var postdata={
id:id
}
//查询赋值
dLong.post("/sys/SysPermissionController/edit",postdata,function(data){
if (data.success) {
// dLong.layerMsg(data.msg)
$('#id').val(data.list.id);
$('#menuType').val(data.list.menuType);
$('#parentId').val(data.parentId);
parenid=data.parentId;
layui.form.render("select");
}else{
dLong.layerMsg(data.msg)
}
},true);
//选中样式
obj.tr.addClass('layui-tree-click').siblings().removeClass('layui-tree-click');
},
spread: function (obj) {
if(obj.state=='open'){
setTimeout(function () {
//懒加载，只有点击父节点的时候，才加载父节点下的子节点数据
tree.lazytree(inst1.config.id, obj.elem, getTreeJson(obj.data.id));
}, 2000);
}
}
});
}
后端传递过来的数据结构：
{
"msg":"",
"success":true,
"treelist":[
{
"children":[
{
"children":[
{
"label":"数据权限",
"value":"9168256c82d943b39028d75239f87875",
"spread":true
},
{
"label":"菜单管理",
"value":"dabaa38e8dfd405c811e6a2a3920b71b",
"spread":true
},
{
"label":"用户维护",
"value":"ae582d7fa4634e93b1a6ba81ec3235a6",
"spread":true
},
{
"label":"角色维护",
"value":"c837d1205bb84f77b2f16234211cefdf",
"spread":true
}
],
"label":"系统管理",
"value":"42ff266e99e34ba18398bfc09651ea95",
"spread":true
},
{
"children":[
{
"label":"业务层",
"value":"dbf9b2a6c1a14ccbafc0641679c5c67f",
"spread":true
},
{
"label":"报表权限",
"value":"8d5b3eed65904219b98b84c24db40305",
"spread":true
}
],
"label":"报表配置",
"value":"56bf1bb00c1c40a0a27843cadd7c3448",
"spread":true
}
]
},
{
"children":[],
"label":"其他",
"value":"32ff266e99e24ba18398bfc09651ea95",
"spread":true
}
]
}