3.9 树形组件-编程书籍在线阅读平台-duidaima 堆代码

3.9 树形组件

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

数据源属性选项

项

属性选项	说明	类型	示例值
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);

结语
树组件还在持续完善。

留下你的读书笔记
你还没登录，点击这里
 用户笔记留言