1. 模块加载名称: tree。
2. 核心方法
2.1. 通过tree.render(options)方法指定一个元素, 便可快速创建一个tree实例。
3. 基础参数
3.1. 目前tree组件提供以下基础参数, 可根据需要进行相应的设置:
4. 数据源属性选项
4.1. 我们将data参数称之为数据源, 其内部支持设定以下选项:
5. 节点被点击的回调 - click
5.1. 在节点被点击后触发, 返回的参数如下:
<script type="text/javascript">
layui.use(['tree'], function() {
var tree = layui.tree;
// 渲染
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); // 当前节点下是否有子节点
}
});
});
</script>6. 复选框被点击的回调 - oncheck
6.1. 点击复选框时触发, 返回的参数如下:
<script type="text/javascript">
layui.use(['tree'], function() {
var tree = layui.tree;
// 渲染
tree.render({
elem: '#test1' // 指向容器选择器
,oncheck: function(obj) {
console.log(obj.data); // 得到当前点击的节点数据
console.log(obj.checked); // 得到当前节点的展开状态: open、close、normal
console.log(obj.elem); // 得到当前节点元素
}
});
});
</script>7. 操作节点的回调 - operate
7.1. 通过operate实现函数, 对节点进行增删改等操作时, 返回操作类型及操作节点:
<script type="text/javascript">
layui.use(['tree'], function() {
var tree = layui.tree;
// 渲染
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') { // 增加节点
} else if (type === 'update') { // 修改节点
console.log(elem.find('.layui-tree-txt').html()); // 得到修改后的内容
} else if (type === 'del') { // 删除节点
}
}
});
});
</script>8. 返回选中的节点数据
8.1. 很多时候tree可能不仅仅只是一个树菜单, 它还用于各种权限控制等场景, 这个时候你需要获得选中的节点。
8.2. 语法: tree.getChecked(id)
8.3. 实例
<script type="text/javascript">
layui.use(['tree'], function() {
var tree = layui.tree;
// 渲染
tree.render({
elem: '#test1' // 指向容器选择器
,id: 'address' // 设定实例唯一索引, 用于基础方法传参使用
});
// 获得选中的节点
var checkData = tree.getChecked('address');
});
</script>9. 设置节点勾选
9.1. 除了通过checked参数对节点进行初始勾选之外, 你还可以通过方法动态对节点执行勾选。
9.2. 语法: tree.setChecked(id, checkedId), 参数checkedId: 代表的是数据源中的节点id。
9.3. 实例
<script type="text/javascript">
layui.use(['tree'], function() {
var tree = layui.tree;
// 渲染
tree.render({
elem: '#test1' // 指向容器选择器
,id: 'address' // 设定实例唯一索引, 用于基础方法传参使用
});
// 执行节点勾选
tree.setChecked('address', 10000103); // 单个勾选id为10000103的节点
tree.setChecked('address', [10000104, 10000105]); // 批量勾选id为10000104, 10000105的节点
});
</script>10. 实例重载
10.1. 重载一个已经创建的组件实例, 被覆盖新的基础属性:
<script type="text/javascript">
layui.use(['tree'], function() {
var tree = layui.tree;
// 渲染
tree.render({
elem: '#test1' // 指向容器选择器
,id: 'address' // 设定实例唯一索引, 用于基础方法传参使用
});
// 可以重载所有基础参数
tree.reload('address', {
// 新的参数
});
});
</script>11. 例子
11.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>树形 - layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<div id="test1"></div>
<script type="text/javascript">
layui.use(['tree'], function() {
var tree = layui.tree;
// 渲染
tree.render({
elem: '#test1' // 指向容器选择器
,id: 'address' // 设定实例唯一索引, 用于基础方法传参使用
,showCheckbox: true // 是否显示复选框
,edit: ['add', 'update', 'del'] // 是否开启节点的操作图标
,accordion: true // 是否开启手风琴模式
,onlyIconControl: false // 是否仅允许节点左侧图标控制展开收缩
,isJump: true // 是否允许点击节点时弹出新窗口跳转
,showLine: true // 是否开启连接线
,text: { // 自定义各类默认文本
defaultNodeName: '未命名' // 节点默认名称
,none: '无数据' // 数据为空时的提示文本
}
,click: function(obj) {
console.log(obj.data); // 得到当前点击的节点数据
console.log(obj.state); // 得到当前节点的展开状态: open、close、normal
console.log(obj.elem); // 得到当前节点元素
console.log(obj.data.children); // 当前节点下是否有子节点
}
,oncheck: function(obj) {
console.log(obj.data); // 得到当前点击的节点数据
console.log(obj.checked); // 得到当前节点的展开状态: open、close、normal
console.log(obj.elem); // 得到当前节点元素
}
,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') { // 增加节点
} else if (type === 'update') { // 修改节点
console.log(elem.find('.layui-tree-txt').html()); // 得到修改后的内容
} else if (type === 'del') { // 删除节点
}
}
,data: [
{
title: '河南省' // 一级菜单
,id: 1000
,children: [{
title: '郑州市' // 二级菜单
,id: 100001
,children: [{
title: '二七区' // 三级菜单
,id: 10000101
,field: 'area'
,href: 'https://www.baidu.com'
,spread: true
,checked: true
,children: [{
title: '城区'
,id: 1000010101
}
,{
title: '大学路街道'
,id: 1000010102
}]
}
,{
title: '郑州经济技术开发区' // 三级菜单
,id: 10000102
,href: 'https://www.baidu.com'
}
,{
title: '郑州航空港经济综合实验区' // 三级菜单
,id: 10000103
,href: 'https://www.baidu.com'
}
,{
title: '郑东新区' // 三级菜单
,id: 10000104
,href: 'https://www.baidu.com'
}
,{
title: '中原区' // 三级菜单
,id: 10000105
,href: 'https://www.baidu.com'
}
,{
title: '郑州高新技术产业开发区' // 三级菜单
,id: 10000106
,href: 'https://www.baidu.com'
,disabled: true
}]
}]
},
{
title: '陕西省' // 一级菜单
,children: [{
title: '西安市' // 二级菜单
}]
}
]
});
// 获得选中的节点
var checkData = tree.getChecked('address');
// 执行节点勾选
tree.setChecked('address', 10000103); // 单个勾选id为10000103的节点
tree.setChecked('address', [10000104, 10000105]); // 批量勾选id为10000104, 10000105的节点
});
</script>
</body>
</html>11.2. 效果图
