treetable-lay的使用指南

一、概述

treetable-lay是一款基於layui框架的樹形表格組件，在實現樹形數據展示的同時，也保留了表格的完整性，提供了豐富的排序、篩選、搜索等功能，還能自定義單元格樣式和事件。

本文將從以下幾個方面詳細闡述treetable-lay的使用。

二、組件安裝與初始化

1、安裝

首先，在頁面中引入treetable-lay的相關資源文件：

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
<script src="treetable-lay/treetable-lay.js"></script>

上述代碼中，layui相關資源文件需要按照官方文檔中的說明進行安裝，而treetable-lay的資源文件則需放置在lib目錄下。

2、初始化

在頁面中創建一個表格容器，然後在頁面加載完成後，使用layui.use()函數初始化treetable-lay組件：

<table id="demo" lay-filter="treetable"></table>

<script>
layui.use('treetable', function(){
  var treetable = layui.treetable;
  
  //渲染表格
  treetable.render({
    elem: '#demo',
    url: 'data.json',
    treeColIndex: 1,
    treeSpid: '0',
    treeIdName: 'id',
    treePidName: 'parentId',
    treeDefaultClose: true,
    cols: [[
      {type: 'numbers'},
      {field: 'title', title: '標題'},
      {field: 'id', title: '編號'},
      {field: 'sort', title: '排序', sort: true},
      {field: 'createDate', title: '創建時間'},
    ]]
  });
});
</script>

上述代碼中，elem表示表格容器的選擇器，url表示獲取表格數據的接口地址，treeColIndex表示樹形結構列的索引，treeSpid表示根節點的父級ID，treeIdName表示節點ID的鍵名，treePidName表示節點的父級ID的鍵名，treeDefaultClose表示默認是否閉合所有節點，cols表示表格的列信息。

三、樹形結構操作

1、節點展開與摺疊

treetable-lay支持對樹形結構的節點進行展開和摺疊，只需在表格容器元素上設置lay-filter屬性為treetable，即可實現該功能。

示例如下：

<table id="demo" lay-filter="treetable"></table>

2、節點選中

treetable-lay還支持對樹形結構的節點進行選中操作，當選中節點時，會觸發treetable.on()函數，開發人員可以在on()函數中自定義操作。

示例如下：

layui.use('treetable', function(){
  var treetable = layui.treetable;
  
  treetable.on('checkbox(treetable)', function(obj){
    console.log(obj.checked); //是否選中
    console.log(obj.data); //選中行的相關數據
    console.log(obj.type); //如果觸發的是全選，則為：all，如果觸發的是單選，則為：one
  });
});

四、自定義單元格

1、單元格樣式

treetable-lay支持對單元格的樣式進行自定義，只需在cols下的某一列中設置templet屬性和自定義模板即可。

示例如下：

cols: [[
  {field: 'title', title: '標題', templet: function(d){
    return '<span style="color:red;">' + d.title + '</span>';
  }},
  {field: 'id', title: '編號'},
  {field: 'sort', title: '排序', sort: true},
  {field: 'createDate', title: '創建時間'},
]]

2、單元格事件

treetable-lay還支持對單元格的事件進行自定義，只需在cols下的某一列中設置templet屬性和自定義模板，然後在自定義模板的節點元素上綁定事件處理函數即可。

示例如下：

cols: [[
  {field: 'title', title: '標題', templet: function(d){
    return '<a lay-event="view">' + d.title + '</a>';
  }},
  {field: 'id', title: '編號'},
  {field: 'sort', title: '排序', sort: true},
  {field: 'createDate', title: '創建時間'},
]]

//綁定單元格事件
treetable.on('tool(treetable)', function(obj){
  console.log(obj.event); //獲取事件類型
  console.log(obj.data); //獲取當前行的數據
});

五、排序、篩選、搜索

1、排序

treetable-lay支持對表格進行排序，只需在表格容器元素上設置lay-filter屬性為treetable，並在cols下的某一列中設置sort屬性為true即可。

示例如下：

<table id="demo" lay-filter="treetable"></table>

cols: [[
  {type: 'numbers'},
  {field: 'title', title: '標題'},
  {field: 'id', title: '編號', sort: true},
  {field: 'sort', title: '排序', sort: true},
  {field: 'createDate', title: '創建時間'},
]]

2、篩選

treetable-lay支持對表格進行篩選，只需在cols下的某一列中設置filter屬性為true和自定義篩選項，然後在表格容器元素上綁定lay-filter屬性即可。

示例如下：

<table id="demo" lay-filter="treetable"></table>

cols: [[
  {type: 'numbers'},
  {field: 'title', title: '標題', filter: true},
  {field: 'id', title: '編號'},
  {field: 'sort', title: '排序', sort: true, filter: true},
  {field: 'createDate', title: '創建時間'},
]]

//綁定表格篩選事件
treetable.on('filter(treetable)', function(obj){
  console.log(obj.field); //獲取篩選的字段名
  console.log(obj.value); //獲取篩選的值
  console.log(obj.where); //獲取當前篩選的篩選條件
});

3、搜索

treetable-lay支持對表格進行搜索，只需在頁面中創建一個搜索框和一個搜索按鈕，並在點擊搜索按鈕時觸發treetable.reload()函數即可。

示例如下：

<div class="search">
  <input type="text" id="keyword" placeholder="請輸入關鍵字">
  <button id="searchBtn">搜索</button>
</div>

//綁定搜索按鈕事件
$('#searchBtn').click(function(){
  var keyword = $('#keyword').val();
  treetable.reload({
    where: { //設定異步數據接口的額外參數，任意設
      keyword: keyword
    }
  });
});

六、完整示例代碼

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
<script src="treetable-lay/treetable-lay.js"></script>

<table id="demo" lay-filter="treetable"></table>

<script>
layui.use('treetable', function(){
  var treetable = layui.treetable;

  //渲染表格
  treetable.render({
    elem: '#demo',
    url: 'data.json',
    treeColIndex: 1,
    treeSpid: '0',
    treeIdName: 'id',
    treePidName: 'parentId',
    treeDefaultClose: true,
    cols: [[
      {type: 'numbers'},
      {field: 'title', title: '標題', templet: function(d){
        return '<span style="color:red;">' + d.title + '</span>';
      }},
      {field: 'id', title: '編號', sort: true},
      {field: 'sort', title: '排序', sort: true},
      {field: 'createDate', title: '創建時間'},
    ]]
  });

  //綁定搜索按鈕事件
  $('#searchBtn').click(function(){
    var keyword = $('#keyword').val();
    treetable.reload({
      where: { //設定異步數據接口的額外參數，任意設
        keyword: keyword
      }
    });
  });

  //綁定單元格事件
  treetable.on('tool(treetable)', function(obj){
    console.log(obj.event); //獲取事件類型
    console.log(obj.data); //獲取當前行的數據
  });

  //綁定表格篩選事件
  treetable.on('filter(treetable)', function(obj){
    console.log(obj.field); //獲取篩選的字段名
    console.log(obj.value); //獲取篩選的值
    console.log(obj.where); //獲取當前篩選的篩選條件
  });

  //綁定節點選中事件
  treetable.on('checkbox(treetable)', function(obj){
    console.log(obj.checked); //是否選中
    console.log(obj.data); //選中行的相關數據
    console.log(obj.type); //如果觸發的是全選，則為：all，如果觸發的是單選，則為：one
  });
});
</script>

<div class="search">
  <input type="text" id="keyword" placeholder="請輸入關鍵字">
  <button id="searchBtn">搜索</button>
</div>