layui tree 資料格式轉換
阿新 • • 發佈:2020-09-16
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>