树形组件文档 - layui.tree

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

模块加载名称：tree

快速使用

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>树组件</title>
  6.   <link rel="stylesheet" href="../src/css/layui.css">
  7. </head>
  8. <body>
  9.   <div id="test1"></div>
  10.   <script src="../src/layui.js"></script>
  11.   <script>
  12.   layui.use('tree', function(){
  13.     var tree = layui.tree;
  14.  
  15.     //渲染
  16.     var inst1 = tree.render({
  17.       elem: '#test1'  //绑定元素
  18.       ,data: [{
  19.         title: '江西' //一级菜单
  20.         ,children: [{
  21.           title: '南昌' //二级菜单
  22.           ,children: [{
  23.             title: '高新区' //三级菜单
  24.             //…… //以此类推，可无限层级
  25.           }]
  26.         }]
  27.       },{
  28.         title: '陕西' //一级菜单
  29.         ,children: [{
  30.           title: '西安' //二级菜单
  31.         }]
  32.       }]
  33.     });
  34.   });
  35.   </script>
  36. </body>
  37. </html>
  38.

基础参数

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

参数选项说明类型示例值
elem指向容器选择器String/Object-
data数据源Array详见数据选项
id设定实例唯一索引，用于基础方法传参使用。String-
showCheckbox是否显示复选框Booleanfalse
edit是否开启节点的操作图标。默认 false。
  • 若为 true，则默认显示“改删”图标
  • 若为 数组，则可自由配置操作图标的显示状态和顺序，目前支持的操作图标有：add、update、del，如：

    edit: [‘add’, ‘update’, ‘del’]
Boolean/Array[‘update’, ‘del’]
accordion是否开启手风琴模式，默认 falseBooleanfalse
onlyIconControl是否仅允许节点左侧图标控制展开收缩。默认 false（即点击节点本身也可控制）。若为 true，则只能通过节点左侧图标来展开收缩Booleanfalse
isJump是否允许点击节点时弹出新窗口跳转。默认 false，若开启，需在节点数据中设定 link 参数（值为 url 格式）Booleanfalse
showLine是否开启连接线。默认 true，若设为 false，则节点左侧出现三角图标。Booleantrue
text自定义各类默认文本，目前支持以下设定：
  1. text: {
  2.   defaultNodeName: ‘未命名’ //节点默认名称
  3.   ,none: ‘无数据’ //数据为空时的提示文本
  4. }
Object-

数据源属性选项

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

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

节点被点击的回调

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

  1. tree.render({
  2.   elem: '#test1'
  3.   ,click: function(obj){
  4.     console.log(obj.data); //得到当前点击的节点数据
  5.     console.log(obj.state); //得到当前节点的展开状态：open、close、normal
  6.     console.log(obj.elem); //得到当前节点元素
  7.  
  8.     console.log(obj.data.children); //当前节点下是否有子节点
  9.   }
  10. });
  11.

复选框被点击的回调

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

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

操作节点的回调

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

  1. tree.render({
  2.   elem: '#test1'
  3.   ,operate: function(obj){
  4.     var type = obj.type; //得到操作类型：add、edit、del
  5.     var data = obj.data; //得到当前节点的数据
  6.     var elem = obj.elem; //得到当前节点元素
  7.  
  8.     //Ajax 操作
  9.     var id = data.id; //得到节点索引
  10.     if(type === 'add'){ //增加节点
  11.       //返回 key 值
  12.       return 123;
  13.     } else if(type === 'update'){ //修改节点
  14.       console.log(elem.find('.layui-tree-txt').html()); //得到修改后的内容
  15.     } else if(type === 'del'){ //删除节点
  16.  
  17.     };
  18.   }
  19. });
  20.

返回选中的节点数据

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

  1. tree.render({
  2.   elem: '#test'
  3.   ,data: [] //数据源
  4.   ,id: 'demoId' //定义索引
  5. });
  6.  
  7. //获得选中的节点
  8. var checkData = tree.getChecked('demoId');
  9.

设置节点勾选

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

  1. tree.render({
  2.   elem: '#test'
  3.   ,data: [] //数据源
  4.   ,id: 'demoId' //定义索引
  5. });
  6.  
  7. //执行节点勾选
  8. tree.setChecked('demoId', 1); //单个勾选 id 为 1 的节点
  9. tree.setChecked('demoId', [2, 3]); //批量勾选 id 为 2、3 的节点
  10.

实例重载

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

  1. tree.render({
  2.   elem: '#test'
  3.   ,data: []
  4.   ,id: 'demoId' //定义索引
  5. });
  6.  
  7.  //可以重载所有基础参数
  8. tree.reload('demoId', {
  9.   //新的参数
  10. });
  11.

结语

树组件还在持续完善。

layui - 用心与你沟通