​​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效果如下：
layui 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>