树形组件文档

2023-07-18 03:09| 来源: 网络整理| 查看: 265

 树形组件文档 - layui.tree

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

模块加载名称：tree

快速使用

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

树组件 layui.use('tree', function(){ var tree = layui.tree; //渲染 var inst1 = tree.render({ elem: '#test1' //绑定元素 ,data: [{ title: '江西' //一级菜单 ,children: [{ title: '南昌' //二级菜单 ,children: [{ title: '高新区' //三级菜单 //…… //以此类推，可无限层级 }] }] },{ title: '陕西' //一级菜单 ,children: [{ title: '西安' //二级菜单 }] }] }); }); 基础参数

目前 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 - 用心与你沟通

【本文地址】

公司简介

联系我们