layui tree資料格式轉換

厭世鼓手發表於2019-11-19
UI

layui tree 資料格式轉換

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'},
    ];

2、樹狀格式，以children表徵子節點關係

var data2= [{
    title: '早餐'
    ,id: 1
    ,children: [{title: '油條' ,id: 5 },
    				{title: '包子',id: 6},
    				{title: '豆漿',id: 7}
    				],
  }];

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>

相關文章