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>