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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM