layui树形结构

 最近接触Layui框架，感觉还不错，就总结一下在使用layui的树形结构的使用。
       在官网上查看时发现关于layui的使用都是静态添加的代码，如果我想动态添加树形节点时遇到了很大的问题，官网的静态示例代码如下：

[javascript]  view plain  copy

1. <span style="font-family:SimSun;"><span style="font-family:'Courier New';">layui.use(['tree', 'layer'], function(){  
2.   var layer = layui.layer  
3.   ,$ = layui.jquery;   
4.     
5.   layui.tree({  
6.     elem: '#demo1' //指定元素  
7.     ,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）  
8.     ,click: function(item){ //点击节点回调  
9.       layer.msg('当前节名称：'+ item.name + '<br>全部参数：'+ JSON.stringify(item));  
10.       console.log(item);  
11.     }  
12.     ,nodes: [ //节点  
13.       {  
14.         name: '常用文件夹'  
15.         ,id: 1  
16.         ,alias: 'changyong'  
17.         ,children: [  
18.           {  
19.             name: '所有未读（设置跳转）'  
20.             ,id: 11  
21.             ,href: 'http://www.layui.com/'  
22.             ,alias: 'weidu'  
23.           }, {  
24.             name: '置顶邮件'  
25.             ,id: 12  
26.           }, {  
27.             name: '标签邮件'  
28.             ,id: 13  
29.           }  
30.         ]  
31.       }, {  
32.         name: '我的邮箱'  
33.         ,id: 2  
34.         ,spread: true  
35.         ,children: [  
36.           {  
37.             name: 'QQ邮箱'  
38.             ,id: 21  
39.             ,spread: true  
40.             ,children: [  
41.               {  
42.                 name: '收件箱'  
43.                 ,id: 211  
44.                 ,children: [  
45.                   {  
46.                     name: '所有未读'  
47.                     ,id: 2111  
48.                   }, {  
49.                     name: '置顶邮件'  
50.                     ,id: 2112  
51.                   }, {  
52.                     name: '标签邮件'  
53.                     ,id: 2113  
54.                   }  
55.                 ]  
56.               }, {  
57.                 name: '已发出的邮件'  
58.                 ,id: 212  
59.               }, {  
60.                 name: '垃圾邮件'  
61.                 ,id: 213  
62.               }  
63.             ]  
64.           }, {  
65.             name: '阿里云邮'  
66.             ,id: 22  
67.             ,children: [  
68.               {  
69.                 name: '收件箱'  
70.                 ,id: 221  
71.               }, {  
72.                 name: '已发出的邮件'  
73.                 ,id: 222  
74.               }, {  
75.                 name: '垃圾邮件'  
76.                 ,id: 223  
77.               }  
78.             ]  
79.           }  
80.         ]  
81.       }  
82.       ,{  
83.         name: '收藏夹'  
84.         ,id: 3  
85.         ,alias: 'changyong'  
86.         ,children: [  
87.           {  
88.             name: '爱情动作片'  
89.             ,id: 31  
90.             ,alias: 'love'  
91.           }, {  
92.             name: '技术栈'  
93.             ,id: 12  
94.             ,children: [  
95.               {  
96.                 name: '前端'  
97.                 ,id: 121  
98.               }  
99.               ,{  
100.                 name: '全端'  
101.                 ,id: 122  
102.               }  
103.             ]  
104.           }  
105.         ]  
106.       }  
107.     ]  
108.   });</span></span>  

     在nodes节点中就是我们需要添加的数据，可以看出来他是一个json数组形势，当我将数据拼接成上述的字符串进行传入时，发现它并不能动态的将它编译成所需的，反而是将字符串的每一个字符进行了解析。
    只好另找方法，在其官网的论坛上，发现有一人写的需要将字符串转为json数组，于是我将字符串转为json数组传入时发现还得不到预期结果，于是乎我想是否可以传入一个数组，于是乎按我的理解进行了拼接。
    代码如下：

[javascript]  view plain  copy

1. <span style="font-family:'Courier New';">function createTree(data) {  
2.     var node = [];  
3.     for (var i = 0; i< data.length; i++) {  
4.         node.push({  
5.             name:'' + data[i].name,  
6.             id: data[i].id  
7.         });  
8.         if (data[i].vehicles.length > 0) {  
9.             var child = [];  
10.             for(var j = 0; j< data[i].vehicles.length; j++) {  
11.                 if(isOnLine(data[i].vehicles[j].vin)) {  
12.                     child.push({  
13.                     name:data[i].vehicles[j].number + '(在线)',  
14.                     id: data[i].vehicles[j].vin  
15.                     });  
16.                 } else {  
17.                     child.push({  
18.                     name:data[i].vehicles[j].number + '(离线)',  
19.                     id: data[i].vehicles[j].vin  
20.                     });  
21.                 }  
22.                 arr.push(data[i].vehicles[j]);  
23.             }  
24.             node[i].children = child;  
25.         }  
26.     }</span>  

将node节点传入便可显示树形结构图。