layui官网
版本：2.5.5
在获取数据构建tree中，数据一般为两种形式：
1、json格式，以id pid表征父子节点关系
var data1=[
{id:'aa',pId:'0',text:'root1'},
{id:'bb',pId:'aa',text:'left1'},
{id:'cc',pId:'aa',text:'left2'},
{id:'dd',pId:'0',text:'root2'},
{id:'ee',pId:'dd',text:'left3'},
];
- 1
- 2
- 3
- 4
- 5
- 6
- 7
2、树状格式，以children表征子节点关系
var data2= [{
title: '早餐'
,id: 1
,children: [{title: '油条' ,id: 5 },
{title: '包子',id: 6},
{title: '豆浆',id: 7}
],
}];
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
layui支持第二种数据格式，故需要将json格式（id pId表示）转换为具有children的树状层次数据格式
主要思想：循环遍历json数据格式，根据pId找寻子节点，递归拼凑出数据结构。
根据data1生成tree效果如下：
源码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script src="layui/layui.js"></script>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div id="test1" class='demo-tree'></div>
</body>
</html>
<script>
var data=[ //原始数据
{id:'aa',pId:'0',text:'root1'},
{id:'bb',pId:'aa',text:'left1'},
{id:'cc',pId:'aa',text:'left2'},
{id:'dd',pId:'0',text:'root2'},
{id:'ee',pId:'dd',text:'left3'},
];
console.log(data);
var formatdata=[];
for(var i in data){ // pId为0时表示为根节点
if(data[i].pId=='0'){
var tempObject={};
tempObject.title=data[i].text;
tempObject.id=data[i].id;
tempObject.children=getChildren(tempObject.id);
formatdata.push(tempObject);
}
}
function getChildren(id){ //递归体 即对每条data逐条递归找children
var tempArray=[];
for(var i in data){
if(data[i].pId==id){
var tempChild={};
tempChild.title=data[i].text;
tempChild.id=data[i].id;
if(selectChildren(data[i].id)){ //若存在子节点，继续递归；否则为叶节点，停止递归
tempChild.children=getChildren(data[i].id);
}
tempArray.push(tempChild);
}
}
return tempArray;
}
function selectChildren(id){ // 是否存在子节点
for(var i in data){
if(data[i].pId==id){
return true;
}
}
return false;
}
console.log(formatdata);
layui.use('tree', function(){ //layui tree写法
var tree = layui.tree;
//渲染
var inst1 = tree.render({
elem: '#test1' //绑定元素
,data:formatdata
,edit: ['add', 'update', 'del'] //操作节点的图标
,click: function(obj){
layer.msg(JSON.stringify(obj.data));
}
});
});
</script>