Layui树形表格详解

一、设置展开层数

在实际运用中，我们可能需要在树形结构中只展示前几层数据，而后面的层级可以通过点击节点来逐层展开，这个时候我们可以使用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); //获取节点信息
});