LayUI中的内置模块之 树形组件文档 - layui.tree

前言

最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。

树形组件文档

在一段漫长的雪藏后，我们在 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>

基础参数

在这里插入图片描述

数据源属性选项

我们将 data 参数称之为数据源，其内部支持设定以下选项
在这里插入图片描述

节点被点击的回调

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

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', {
  //新的参数
});

官网链接

版权声明：本文为daimeijin原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。