用生命谱写代码的赞歌

0%

layui tree数据格式转化

Posted on Edited on In
构建 tree 的数据一般为两种形式：json 格式和树状格式，layui 支持树状格式，所以需要进行数据格式转化。

构建 tree 数据的两种形式

  1. json 格式，以 id pid 表征父子节点关系

    1
    2
    3
    4
    5
    6
    7
    8
    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'},
        {id:'ff',pId:'bb',text:'right1'},
    ];

  2. 树状格式，以 children 表征子节点关系

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var data2= [{
        title: '早餐',
        id: 1,
        children: [
          {title: '油条',id: 5},
          {title: '包子',id: 6},
          {title: '豆浆',id: 7},
        ],
    }];

layui 支持第二种数据格式，故需要将 json 格式（id pId表示）转换为具有 children 的树状层次数据格式。

主要思想：循环遍历 json 数据格式，根据 pId 找寻子节点，递归拼凑出数据结构。

参考代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/layui@2.6.8/dist/css/layui.css">
  <title>Document</title>
</head>
<body>
  <div id="test1" class='demo-tree'></div>
  <script src="https://unpkg.com/layui@2.6.8/dist/layui.js"></script>
  <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'},
        {id:'ff',pId:'bb',text:'right1'},
    ];
    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>
</body>
</html>