layui/docs/treeTable/index.md

title, toc

title	toc
树表组件 treeTable	true

树表组件 ^2.8+

树表组件 treeTable 是基于 table 组件延伸的树形表格组件，支持常见的树组件功能。

示例

以下所有示例中演示的数据均为「静态模拟数据」，实际使用时换成您的真实接口即可。

{{- d.include("/treeTable/detail/demo.md") }}

API

table 组件的所有 API 均适用于 treeTable 组件。在此基础上，treeTable 还专门提供了以下方法：

API	描述
var treeTable = layui.treeTable;	获得 treeTable 模块。
treeTable.render(options)	treeTable 组件渲染，核心方法。
treeTable.reload(id, options)	树表完整重载。
treeTable.reloadData(id, options)	树表数据重载。
treeTable.getData(id, isSimpleData)	获取树表数据。
treeTable.getNodeDataByIndex(id, index)	通过行元素对应的 data-index 属性获取对应行数据。
treeTable.updateNode(id, index, data)	更新行数据。
treeTable.removeNode(id, index)	删除行记录。
treeTable.addNodes(id, opts)	新增行记录。
treeTable.expandNode(id, opts)	展开或关闭节点。
treeTable.expandAll(id, expandFlag)	展开或关闭全部节点。
treeTable.setRowChecked(id, opts)	设置行选中状态
treeTable.checkAllNodes(id, checked)	全选或取消全选
treeTable.on('event(filter)', callback)	treeTable 相关事件

渲染

treeTable.render(options);

• 参数 options : 基础属性配置项。#详见属性

该组件渲染的使用方式与 table 组件完全相同。

属性

table 组件的所有基础属性均适用于 treeTable 组件。在此基础上，treeTable 还专门提供了 tree 属性集：

{{- d.include("/treeTable/detail/options.md") }}

重载

即对一段已经渲染好的表格重新设置属性并渲染，可分为以下几种重载方式：

重载方式	API
完整重载	treeTable.reload(id, options)
仅数据重载	treeTable.reloadData(id, options)

• 参数 id : treeTable 渲染时的 id 属性值
• 参数 options : 基础属性配置项。#详见属性

使用方式与 table 组件完全相同，具体用法可参考：table 重载

获取树表数据

treeTable.getData(id, isSimpleData);

• 参数 id : treeTable 渲染时的 id 属性值
• 参数 isSimpleData : 是否为简单数据，为 true 时返回简单数据结构的数据，否则则为带层级的数据

该方法用于获取表格当前页的全部数据，它对应的是接口返回的原始数据，不包含 treeTable 组件内部的特定字段。

// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 获取当前页接口的树表数据
var data = treeTable.getData('test'); // 获取第一行的数据
console.log(data);

获取树表对应下标的数据

treeTable.getNodeDataByIndex(id, index);

• 参数 id : treeTable 渲染时的 id 属性值
• 参数 index : 节点对应的行下标，一般可通过 <tr> 元素的 data-index 属性获得

该方法用于获取表格当前页对应下表的数据，返回的数据格式同 treeTable.getData() 方法。

// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 获取当前页接口数据
var data = treeTable.getNodeDataByIndex('test', 0); // 获取第一行的数据
console.log(data);

更新行数据

treeTable.updateNode(id, index, data);

• 参数 id : treeTable 渲染时的 id 属性值
• 参数 index : 节点对应的行下标，一般可通过 <tr> 元素的 data-index 属性获得
• 参数 data : 更新的数据项，可包含要更新的各种字段

// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 更新行数据
var data = treeTable.updateNode('test', 0, {  // 更新第一行的数据
  title: '123'
});

删除行记录

treeTable.removeNode(id, index);

• 参数 id : treeTable 渲染时的 id 属性值
• 参数 index/node : 要删除的节点数据，也可以是节点对应的行下标（ data-index）

// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 删除行记录
treeTable.removeNode('test', 0); // 删除第一行

新增行数据

treeTable.addNodes(id, opts);

• 参数 id : treeTable 渲染时的 id 属性值
• 参数 opts : 该方法可支持的可选属性项，详见下表：

opts	描述	类型	默认值
parentIndex	父节点数据下标	number	-
index	节点对应的行下标。若为 -1 表示插入到最后，否则则插入到对应下标。	number	-1
data	新增的节点数据项。若新增的是多个节点，则用数组的形式。若只有一个节点可以是普通对象形式	object	-
focus	是否聚焦到新增的节点。若存在多个，则聚焦到第一个新增的节点	boolean	false

该方法可返回新增后的数据项。详细用法可参考：#示例

// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 新增行数据
treeTable.addNodes('test', {
  parentIndex: 0, // 一般在 tool 事件中，可通过对应数据项中的 `LAY_DATA_INDEX` 特定属性获得
  index: 1,
  data: {
    title: '新节点-1'
  }
});

展开或关闭节点

treeTable.expandNode(id, opts);

• 参数 id : treeTable 渲染时的 id 属性值
• 参数 opts : 该方法可支持的可选属性项，详见下表：

opts	描述	类型	默认值
index	节点对应的行下标，一般可通过 <tr> 元素的 data-index 属性获得	number	-
expandFlag	设置展开或关闭状态，若为 true 则表示展开；false 则为关闭；null 则表示切换	boolean/null	-
inherit	子节点是否继承父节点的展开或关闭状态，expandFlag 属性必须为 boolean 型时才有效。	boolean	false
callbackFlag	是否触发事件（beforeExpand,onExpand）	boolean	false

若操作的节点不是一个父节点，则返回 null，否则返回操作之后的折叠状态。

// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 展开或关闭对应节点
treeTable.expandNode('test', {
  index: 0, // 第一行
  expandFlag: true // 展开
});

展开或关闭全部节点

treeTable.expandAll(id, expandFlag);

• 参数 id : treeTable 渲染时的 id 属性值
• 参数 expandFlag : 折叠状态。 true 展开；false 关闭

// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 展开或关闭全部节点
treeTable.expandAll('test', false); // 关闭全部节点

设置行选中状态

treeTable.setRowChecked(id, opts);

• 参数 id : treeTable 渲染时的 id 属性值
• 参数 opts : 该方法可支持的可选属性项，详见下表：

opts	描述	类型	默认值
index	要设置选中状态的行下标或行数据	number/object	-
checked	选中状态。true 选中；false 取消选中；null 切换。 其中，所为 radio 框，则不支持 null(切换)。	boolean	DDD
callbackFlag	是否触发事件，若为 true，则 checked: false 无效。其对应的事件跟 table 的 radio,checkbox 事件用法一样	boolean	DDD

// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 勾选或取消勾选单个节点
treeTable.setRowChecked('test', {
  index: 0,
  checked: true // 选中
}); 

设置全选或取消全选

treeTable.checkAllNodes(id, checked);

• 参数 id : treeTable 渲染时的 id 属性值
• 参数 checked : 选中状态。true 选中；false 取消选中；null 复选框模式时的切换。

// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 勾选或取消勾选单个节点
treeTable.checkAllNodes('test', true);  // 全选 

事件

treeTable.on('event(filter)', callback);

treeTable 事件继承于 table 事件，具体使用方法可参考：#table 事件

贴士

treeTable 基于 table 组件扩展而来，因此，熟练运用 treeTable 的前提是熟悉 table 组件。 亦可通过 table 提供的基础 API 操作 treeTable 组件，但 treeTable 无法操作 table。