21.树形模块

学习要点：
1.树形模块
本节课我们来开始了解 Layui 的内置模块：树形模块。
一．树形模块
1. 树形结构，就是菜单的层次级别，比如二级、三级，无限级菜单的意思；
2. 先设置一个最简单的树形结构：
<div id="test"></div>
layui.use(['tree'], () => {
const tree = layui.tree
//执行实例
tree.render({
elem : '#test',
data : [
{
'title' : '一级分类 1',
'children' : [
{
'title' : '二级分类 1'
},
{
'title' : '二级分类 2'
},
{
'title' : '二级分类 3',
},
]
},
]
})
})
3. 对于参数，下面列出比较常用的属性，更多参考手册：
属性 描述
elem 容器选择器，DOM 对象
data 数据源
id 设定实例的索引
showCheckbox 是否选择复选框
edit 是否开启节点的编辑
accordion 是否开启手风琴模式
onlyIconControl 是否仅允许节点左侧图标控制展开收缩
isJump 是否允许点击节点时弹出新窗口跳转
showLine 是否开启连接线
text 自定义各类默认文本
showCheckbox : true, //显示复选框
accordion : true, //手风琴模式
showline : false, //不显示连接线
edit : true, //开启编辑
4. 对于 data 参数里面的数据源，有一下参数：
属性 描述
title 节点标题
id 节点唯一索引值
field 节点字段名
children 子节点
href 弹出 url，需开启 isJump
spread 节点是否被展开，默认 false
checked 节点是否初始选中状态
disabled 节点被禁用
'title' : '一级分类 1',
'spread' : true,
'disabled' : true, 5. 回调有：1.节点点击回调；2.复选框选中回调；3.编辑操作回调；
//节点点击回调
click(obj) {
console.log(obj)
},
//复选框选中
oncheck(obj) {
console.log(obj)
},
//操作节点
operate(obj) {
console.log(obj)
},