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); //獲取節點信息
});