树表组件 <sup title="指在该版本新增的组件">2.8+</sup>

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

注意：该组件不支持 IE8，若要支持，可自行添加 <a href="https://github.com/inexorabletash/polyfill/blob/716a3f36ca10fad032083014faf1a47c638e2502/es5.js#L300-L345" rel="nofollow" target="_blank">polyfill</a>实现兼容。

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

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

treeTable.render(options);

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

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

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

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

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

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

treeTable.reloadAsyncNode(id, index)

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

该方法用于在异步模式下，对节点进行重载。

// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  async: {
    enable: true // 开启异步加载模式
  }
  // 其他属性 …
});
// 重载子节点
treeTable.reloadAsyncNode('test', 0); // 第一行

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.getNodeById(id, dataId)

• 参数 id : treeTable 渲染时的 id 属性值
• 参数 dataId : 数据项的 id 属性值

// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 获取节点信息集
var obj = treeTable.getNodeById('test', 1);
console.log(obj);

treeTable.getNodesByFilter(id, filter, opts)

• 参数 id : treeTable 渲染时的 id 属性值
• 参数 filter : 过滤函数
• 参数 opts : 该方法的属性选项，详见下表：

// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 获取节点信息集
var obj = treeTable.getNodesByFilter('test', function(item){
  // 自定义过滤条件
  return item.id > 1000;
});
console.log(obj);

treeTable.getNodeDataByIndex(id, index);

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

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

// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 获取树表对应下标的数据
var obj = treeTable.getNodeDataByIndex('test', 0); // 获取第一行的数据
console.log(obj);

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 : 该方法可支持的可选属性项，详见下表：

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

// 渲染
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 : 该方法可支持的可选属性项，详见下表：

若操作的节点不是一个父节点，则返回 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 : 该方法可支持的可选属性项，详见下表：

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

// 行单击时设置单选选中（可与 row 事件配合）
treeTable.on('row(test)', function (obj) {
  obj.setRowChecked({
    type: 'checkbox' // radio | checkbox
  });
});

treeTable.checkAllNodes(id, checked);

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

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

treeTable.checkStatus(id, includeHalfCheck);

• 参数 id : treeTable 渲染时的 id 属性值
• 参数 includeHalfCheck : 是否包含半选数据

// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});

treeTable.checkStatus('test', true);  // 包含半选

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

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

贴士

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