Skip to content

C
crscd
Switch branch/tag
Find file
Normal viewHistoryPermalink
tree.html 3.22 KB
EditWeb IDE
Newer Older
YazhouChen's avatar
11
82002de4
 
YazhouChen committed
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 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>树模块 - layui</title>

<link rel="stylesheet" href="../src/css/layui.css">

<style>
body{padding: 50px 100px;}
</style>
</head>
<body>

<ul id="demo"></ul>

<ul id="demo1" style="margin-top: 50px;"></ul>

<script src="../src/layui.js"></script>
<script>

layui.use('tree', function(){
  var tree = layui.tree({
    elem: '#demo' //指定元素
    //,check: 'checkbox' //勾选风格
    ,skin: 'as' //设定皮肤
    //,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
    ,drag: true
    ,click: function(item){ //点击节点回调
      console.log(item)
    }
    ,nodes: [ //节点
      {
        name: '常用文件夹'
        ,id: 1
        ,alias: 'changyong'
        ,children: [
          {
            name: '所有未读'
            ,id: 11
            //,href: 'http://www.layui.com/'
            ,alias: 'weidu'
          }, {
            name: '置顶邮件'
            ,id: 12
          }, {
            name: '标签邮件'
            ,id: 13
          }
        ]
      }, {
        name: '我的邮箱'
        ,id: 2
        ,spread: true
        ,children: [
          {
            name: 'QQ邮箱'
            ,id: 21
            ,spread: true
            ,children: [
              {
                name: '收件箱'
                ,id: 211
                ,children: [
                  {
                    name: '所有未读'
                    ,id: 2111
                  }, {
                    name: '置顶邮件'
                    ,id: 2112
                  }, {
                    name: '标签邮件'
                    ,id: 2113
                  }
                ]
              }, {
                name: '已发出的邮件'
                ,id: 212
              }, {
                name: '垃圾邮件'
                ,id: 213
              }
            ]
          }, {
            name: '阿里云邮'
            ,id: 22
            ,children: [
              {
                name: '收件箱'
                ,id: 221
              }, {
                name: '已发出的邮件'
                ,id: 222
              }, {
                name: '垃圾邮件'
                ,id: 223
              }
            ]
          }
        ]
      }
    ]
  });
  
  //生成一个模拟树
  var createTree = function(node, start){
    node = node || function(){
      var arr = [];
      for(var i = 1; i < 10; i++){
        arr.push({
          name: i.toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
        });
      }
      return arr;
    }();
    start = start || 1;  
    layui.each(node, function(index, item){  
      if(start < 10 && index < 9){
        var child = [
          {
            name: (1 + index + start).toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
          }
        ];
        node[index].children = child;
        createTree(child, index + start + 1);
      }
    });
    return node;
  };

  layui.tree({
    elem: '#demo1' //指定元素
    ,nodes: createTree()
  });
  
});
</script>

<pre class="layui-code">
# layui.tree-v2 备忘
* check参数 - checkbox、radio的支持
* 拖拽的支持
</pre>

</body>
</html>