一、设置展开层数
在实际运用中，我们可能需要在树形结构中只展示前几层数据，而后面的层级可以通过点击节点来逐层展开，这个时候我们可以使用Layui树形表格的目录树属性treeLevel，通过设置该属性来控制初始化时展开的层数。
layui.use(['table'], function() {
var table = layui.table;
table.render({
elem: '#test',
url: '/api/data',
cols: [[
{ type: 'checkbox' },
{ field: 'id', title: 'ID' },
{ field: 'name', title: '名称', templet: function(d) {
return d.name;
}},
{ field: 'score', title: '分数' }
]],
treeLevel: 2, //设置展开到第二层
treeIndent: 15 //每一层缩进的像素数
});
});
在上述代码中，我们通过设置 table.render() 方法的treeLevel属性为2，来控制只展开了树形表格的前两层数据。
二、layui树形表格过滤查询
在实际应用中，我们经常需要在树形结构中进行查找和过滤，Layui树形表格也提供了相应的过滤接口。treeFind接口是在初始化表格的数据源中查找指定值所在的节点，并返回查找到的节点信息。接口的语法如下：
table.treeFind(data, property, value, children)
data参数为数据源，property参数为字段名称，value参数为字段值，children为节点的子节点，在树形结构中为必填项，一般为children或childs。
一般情况下，我们结合搜索框来使用该方法，代码示例如下：
<div class="layui-form-item">
<label class="layui-form-label">搜索</label>
<div class="layui-input-inline">
<input type="text" name="filter" placeholder="请输入名称" autocomplete="off" class="layui-input">
</div>
<button class="layui-btn" id="filter">搜索</button>
</div>
var data = [...]; //数据源
//搜索按钮点击事件
$('#filter').click(function() {
var value = $('input[name="filter"]').val();
if(value === '') { //搜索框为空时，直接重载表格
table.reload('test', {
data: data,
treeLevel: 2 //初始化时只展开前两层
});
} else { //搜索框不为空，过滤表格并展开到第一层
var result = table.treeFind(data, 'name', value, 'childs');
table.reload('test', {
data: result,
treeLevel: 1 //只展开第一层
});
}
});
在上述代码中，我们通过为“搜索”按钮添加点击事件，来触发过滤操作。通过读取搜索框的输入值来获取过滤关键字，然后调用table.treeFind接口在数据源中查找符合条件的数据，并传递给表格的data属性，重新渲染表格，同时也控制表格的treeLevel属性来只展开第一层。
三、其他相关功能简述
1、展开全部节点
Layui树形表格提供了一个方法treeOpenAll，可以展开全部节点。
table.treeOpenAll('test');
2、收起全部节点
Layui树形表格提供了一个方法treeCloseAll，可以收起全部节点。
table.treeCloseAll('test');
3、获取当前节点信息
Layui树形表格提供了一个方法treeGetNode，可以获取指定节点的信息。
//获取ID为1的节点信息
var node = table.treeGetNode('test', 'id', 1);
console.log(node);
4、监听树形节点单击事件
Layui树形表格提供了一个tree()事件，可以在表格节点单击时触发相应处理方法。该事件中传递了节点信息node和当前Click事件对象obj，可以根据该对象来判断用户选择的是哪个节点。
table.on('tree(test)', function(obj) {
console.log(obj.node); //获取节点信息
});
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/239169.html
微信扫一扫 
支付宝扫一扫 