- 快速使用
- 基础参数
- 数据源参数
- 回调

- 节点被点击的回调
- 复选框被点击的回调
- 操作节点的回调

- 方法

- 返回选中的节点数据
- 设置节点勾选
- 实例重载

-

#  树形组件文档 - layui.tree

在一段漫长的雪藏后，我们在 layui 2.5.0 的版本中重新创作了 tree，以便它能够更加适用于绝大多数业务场景，而风格依然遵循 layui 独有的极简和清爽。需要提醒的是，如果您的项目中仍然采用了 layui 2.5 版本之前的 tree，它将不被兼容，请尽快修改为以下新的调用方式。

模块加载名称：tree

快速使用

通过 tree.render() 方法指定一个元素，便可快速创建一个 tree 实例。

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>树组件</title>
      <link rel="stylesheet" href="../src/css/layui.css">
    </head>
    <body>
      <div id="test1"></div>
      <script src="../src/layui.js"></script>
      <script>
      layui.use('tree', function(){
        var tree = layui.tree;

        //渲染
        var inst1 = tree.render({
          elem: '#test1'  //绑定元素
          ,data: [{
            title: '江西' //一级菜单
            ,children: [{
              title: '南昌' //二级菜单
              ,children: [{
                title: '高新区' //三级菜单
                //…… //以此类推，可无限层级
              }]
            }]
          },{
            title: '陕西' //一级菜单
            ,children: [{
              title: '西安' //二级菜单
            }]
          }]
        });
      });
      </script>
    </body>
    </html>

基础参数

目前 tree 组件提供以下基础参数，可根据需要进行相应的设置

参数选项 | 说明 | 类型 | 示例值
--- | --- | --- | ---
elem | 指向容器选择器 | String/Object | -
data | 数据源 | Array | 详见数据选项
id | 设定实例唯一索引，用于基础方法传参使用。 | String | -
showCheckbox | 是否显示复选框 | Boolean | false

edit

是否开启节点的操作图标。默认 false。

- 若为 true，则默认显示“改删”图标
- 若为 数组，则可自由配置操作图标的显示状态和顺序，目前支持的操作图标有：add、update、del，如：
  edit: ['add', 'update', 'del']

Boolean/Array

['update', 'del']

accordion | 是否开启手风琴模式，默认 false | Boolean | false
onlyIconControl | 是否仅允许节点左侧图标控制展开收缩。默认 false（即点击节点本身也可控制）。若为 true，则只能通过节点左侧图标来展开收缩 | Boolean | false
isJump | 是否允许点击节点时弹出新窗口跳转。默认 false，若开启，需在节点数据中设定 link 参数（值为 url 格式） | Boolean | false
showLine | 是否开启连接线。默认 true，若设为 false，则节点左侧出现三角图标。 | Boolean | true

text

自定义各类默认文本，目前支持以下设定：

    text: {
      defaultNodeName: '未命名' //节点默认名称
      ,none: '无数据' //数据为空时的提示文本
    }

Object

-

数据源属性选项

我们将 data 参数称之为数据源，其内部支持设定以下选项

属性选项 | 说明 | 类型 | 示例值
--- | --- | --- | ---
title | 节点标题 | String | 未命名
id | 节点唯一索引值，用于对指定节点进行各类操作 | String/Number | 任意唯一的字符或数字
field | 节点字段名 | String | 一般对应表字段名
children | 子节点。支持设定选项同父节点 | Array | [{title: '子节点1', id: '111'}]
href | 点击节点弹出新窗口对应的 url。需开启 isJump 参数 | String | 任意 URL
spread | 节点是否初始展开，默认 false | Boolean | true
checked | 节点是否初始为选中状态（如果开启复选框的话），默认 false | Boolean | true
disabled | 节点是否为禁用状态。默认 false | Boolean | false

节点被点击的回调

在节点被点击后触发，返回的参数如下：

    tree.render({
      elem: '#test1'
      ,click: function(obj){
        console.log(obj.data); //得到当前点击的节点数据
        console.log(obj.state); //得到当前节点的展开状态：open、close、normal
        console.log(obj.elem); //得到当前节点元素

        console.log(obj.data.children); //当前节点下是否有子节点
      }
    });

复选框被点击的回调

点击复选框时触发，返回的参数如下：

    tree.render({
      elem: '#test1'
      ,oncheck: function(obj){
        console.log(obj.data); //得到当前点击的节点数据
        console.log(obj.checked); //得到当前节点的展开状态：open、close、normal
        console.log(obj.elem); //得到当前节点元素
      }
    });

操作节点的回调

通过 operate 实现函数，对节点进行增删改等操作时，返回操作类型及操作节点

    tree.render({
      elem: '#test1'
      ,operate: function(obj){
        var type = obj.type; //得到操作类型：add、edit、del
        var data = obj.data; //得到当前节点的数据
        var elem = obj.elem; //得到当前节点元素

        //Ajax 操作
        var id = data.id; //得到节点索引
        if(type === 'add'){ //增加节点
          //返回 key 值
          return 123;
        } else if(type === 'update'){ //修改节点
          console.log(elem.find('.layui-tree-txt').html()); //得到修改后的内容
        } else if(type === 'del'){ //删除节点

        };
      }
    });

返回选中的节点数据

很多时候 tree 可能不仅仅只是一个树菜单，它还用于各种权限控制等场景，这个时候你需要获得选中的节点。
语法：tree.getChecked(id)

    tree.render({
      elem: '#test'
      ,data: [] //数据源
      ,id: 'demoId' //定义索引
    });

    //获得选中的节点
    var checkData = tree.getChecked('demoId');

设置节点勾选

除了通过 checked 参数对节点进行初始勾选之外，你还可以通过方法动态对节点执行勾选
语法： tree.setChecked(id, checkedId)
参数 checkedId：代表的是数据源中的节点 id

    tree.render({
      elem: '#test'
      ,data: [] //数据源
      ,id: 'demoId' //定义索引
    });

    //执行节点勾选
    tree.setChecked('demoId', 1); //单个勾选 id 为 1 的节点
    tree.setChecked('demoId', [2, 3]); //批量勾选 id 为 2、3 的节点

实例重载

重载一个已经创建的组件实例，被覆盖新的基础属性

    tree.render({
      elem: '#test'
      ,data: []
      ,id: 'demoId' //定义索引
    });

     //可以重载所有基础参数
    tree.reload('demoId', {
      //新的参数
    });

结语

树组件还在持续完善。

layui - 在每一个细节中，用心与你沟通