树形组件文档 - 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,则默认显示“改删”图标
  • 若为 数组,则可自由配置操作图标的显示状态和顺序,目前支持的操作图标有:addupdatedel,如:

    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); // 节点是否被选中
    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 实例

tree.render({
  elem: '#test'
  ,data: []
  ,id: 'demoId' //定义索引
});
 
 // 可以重置指定属性项
tree.reload('demoId', options);
      
结语

树组件还在持续完善。

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