树形菜单文档 - layui.tree

也许你对树菜单再熟悉不过了,然而你仍有可能更青睐layui的tree,它也许比以往你知道的任何一个类似的组件都更轻量、简单,你在享受许多功能的同时,甚至不用去记太多的参数。另外,最大的重点在于,她在UI上完全遵循于当下主流的风格,并且具备高度可扩展性,会与你的许多页面非常融洽的并存。

模块加载名称: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如下表

    参数 类型 描述
    elem string 指定元素的选择器
    skin string 风格定义
    click Function 点击节点的回调,详细介绍见下文
    href string 节点链接(可选),未设则不会跳转
    target string 节点打开方式(即a的target值),必须href设定后才有效
    nodes object 节点数据,详细格式见下表
    节点数据格式

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

    参数 类型 描述
    name string 节点名称
    spread boolean 是否展开状态(默认false)
    href string 节点链接(可选),未设则不会跳转
    children object 同nodes节点,可无限延伸。如:
    children: [{
      name: '子节点'
      ,spread: true //展开
      ,children: [{
        name: '子子节点'
        ,children: [……]
      }]
    }, {……}]       
                
    自定义参数 - 除了上述必要键外,你还可以给每条节点传入自定义参数,如:alias、id等。那么在触发click回调时,就会把节点所拥有的参数都返回给你。

    这是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名 描述
      无需设置 暂只提供默认风格

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

            
      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的不断完善,她的每一个组件,都会尽可能地做到完美。

      Layui - 用心与你沟通