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>