layui树形结构

 最近接触Layui框架,感觉还不错,就总结一下在使用layui的树形结构的使用。
       在官网上查看时发现关于layui的使用都是静态添加的代码,如果我想动态添加树形节点时遇到了很大的问题,官网的静态示例代码如下:
[javascript]  view plain  copy
  1. "font-family:SimSun;">"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 + '
    全部参数:'
    + 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.   });  

     在nodes节点中就是我们需要添加的数据,可以看出来他是一个json数组形势,当我将数据拼接成上述的字符串进行传入时,发现它并不能动态的将它编译成所需的,反而是将字符串的每一个字符进行了解析。
    只好另找方法,在其官网的论坛上,发现有一人写的需要将字符串转为json数组,于是我将字符串转为json数组传入时发现还得不到预期结果,于是乎我想是否可以传入一个数组,于是乎按我的理解进行了拼接。
    代码如下:
[javascript]  view plain  copy
  1. "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.     }  
将node节点传入便可显示树形结构图。

你可能感兴趣的:(layui树形结构)