树形菜单文档 - layui.tree

假设你的页面任意位置有这样一个元素

那么你的js可以这样书写

layui.tree({
  elem: '#demo' //传入元素选择器
  ,nodes: [{ //节点
    name: '父节点1'
    ,children: [{
      name: '子节点11'
    },{
      name: '子节点12'
    }]
  },{
    name: '父节点2（可以点左侧箭头，也可以双击标题）'
    ,children: [{
      name: '子节点21'
      ,children: [{
        name: '子节点211'
      }]
    }]
  }]
});
      

于是就直接有了下面的样子

语法：layui.tree(options)

layui.use('tree', function(){
  layui.tree(options);
});
      

options是一个对象参数，可支持的key如下表

参数nodes是整个树形菜单渲染的关键，其所接受的格式如下

children: [{
  name: '子节点'
  ,spread: true //展开
  ,children: [{
    name: '子子节点'
    ,children: [……]
  }]
}, {……}]       
            

这是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
          }
        ]
      }
    ]
  }
]      
      

效果如下：

很多时候我们并不只是单纯地展现一个树形菜单，而是要进行目标选择后的结果渲染。譬如选择节点A，我们希望看到节点A的结果。如果你对该节点设置了href属性，则直接跳转即可。但很多时候我们还可能需要获取节点的其它参数来渲染出选择节点后的结果，这就需要我们的click回调。

layui.tree({
  elem: '#demo'
  ,nodes: [{ //节点数据
    name: '节点A'
    ,children: [{
      name: '节点A1'
    }]
  }, {
    name: '节点B'
    ,children: [{
      name: '节点B1'
      ,alias: 'bb' //可选
      ,id: '123' //可选
    }, {
      name: '节点B2'
    }]
  }] 
  ,click: function(node){
    console.log(node) //node即为当前点击的节点数据
  }  
});
 
//我们假设你点击的是上述的节点B1，那么click回调返回的参数如下
{
  "name": "节点B1"
  ,"alias": "bb"
  ,"id": "123"
}

      

你肯定不会满足于tree的单一展现风格，我们的skin参数允许你改变菜单的样式。由于我们的所有图标都是采用文本字体，因此你只需在css设置一个color就可以改变图标的颜色（你是不是很想把文件夹的颜色改成屎黄色？）。layui会内置多种风格的选择，但目前考虑到发布的急切性，所以暂时还没有内置，后续如果有提供，将会在下述表格中展现。

因此我们更推荐你自己去定义它。规范如下：

      
skin: 'shihuang'
      

那么tree将会追加一个名为layui-tree-skin-shihuang的class，你只需要根据它去重置tree的样式即可（借助Chrome调试工具看元素选择器），下面的例子是把文件夹改成屎黄色

body .layui-tree-skin-shihuang .layui-tree-branch{color: #EDCA50;}     
      

事实上我们原本在v1的计划中就把check（checkbox、radio）选择框、drag（节点拖拽）通通都加上。但显然我们还不能把过多的时间放在这些我们暂时认为无关紧要的地方，我们现在有太多太多更重要的事情要做。请务必相信，随着layui的不断完善，她的每一个组件，都会尽可能地做到完美。