mirror of https://github.com/layui/layui
更新 treeTable 文档
parent
c059f9e6c5
commit
23dc290d0c
|
@ -59,6 +59,7 @@ treeTable.render({
|
||||||
| name | 自定义「节点」属性名 | string | `name` |
|
| name | 自定义「节点」属性名 | string | `name` |
|
||||||
| id | 自定义「节点索引」属性名 | string | `id` |
|
| id | 自定义「节点索引」属性名 | string | `id` |
|
||||||
| pid | 自定义「父节点索引」属性名 | string | `parentId` |
|
| pid | 自定义「父节点索引」属性名 | string | `parentId` |
|
||||||
|
| icon | 自定义图标的属性名称 | string | `icon` |
|
||||||
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -118,12 +119,40 @@ treeTable.render({
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| enable | 是否开启异步加载模式。只有开启时 `async` 的其他属性配置才有效。 **注意:** 异步加载子节点不应跟 `simpleData` 同时开启,可以是 `url+simpleData` 的方式,获取完整的简单数据进行转换。若开启异步加载模式,即表示按需异步加载子节点。 | boolean | `false` |
|
| enable | 是否开启异步加载模式。只有开启时 `async` 的其他属性配置才有效。 **注意:** 异步加载子节点不应跟 `simpleData` 同时开启,可以是 `url+simpleData` 的方式,获取完整的简单数据进行转换。若开启异步加载模式,即表示按需异步加载子节点。 | boolean | `false` |
|
||||||
| url | 异步加载的接口,可以根据需要设置与顶层接口不同的接口,若相同可不设置该属性 | string | - |
|
| url | 异步加载的接口,可以根据需要设置与顶层接口不同的接口,若相同可不设置该属性 | string | - |
|
||||||
|
| [format](#options.tree.async.format) | 用于处理异步子节点数据的回调函数,该属性优先级高于 `async.url` 属性。用法详见下文。 | function | - |
|
||||||
| type | 请求的接口类型,设置可缺省同上 | string | - |
|
| type | 请求的接口类型,设置可缺省同上 | string | - |
|
||||||
| contentType | 提交参数的数据类型,设置可缺省同上 | string | - |
|
| contentType | 提交参数的数据类型,设置可缺省同上 | string | - |
|
||||||
| headers | 提交请求头,设置可缺省同上 | object | - |
|
| headers | 提交请求头,设置可缺省同上 | object | - |
|
||||||
| where | 提交参数的数据,设置可缺省同上 | object | - |
|
| where | 提交参数的数据,设置可缺省同上 | object | - |
|
||||||
| autoParam | 自动参数,可以根据配置项以及当前节点的数据传参,如: `['type', 'age=age', 'parentId=id']` ,那么其请求参数将包含: `{type: '父节点 type', age: '父节点 age', parentId: '父节点 id'}` | array | - |
|
| autoParam | 自动参数,可以根据配置项以及当前节点的数据传参,如: `['type', 'age=age', 'parentId=id']` ,那么其请求参数将包含: `{type: '父节点 type', age: '父节点 age', parentId: '父节点 id'}` | array | - |
|
||||||
|
|
||||||
|
<div id="options.tree.async.format" class="ws-anchor">
|
||||||
|
|
||||||
|
**format 示例** :
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
treeTable.render({
|
||||||
|
elem: '',
|
||||||
|
treee: {
|
||||||
|
enable: true,
|
||||||
|
async: {
|
||||||
|
format: function(trData, options, callback){
|
||||||
|
// trData 为行数据、options 为 treeTable 属性配置项
|
||||||
|
// callbacck 为子节点的渲染函数
|
||||||
|
// 可利用该函数对子节点数据进行异步请求或其他格式化处理
|
||||||
|
var nodeList = [
|
||||||
|
{id: 111, name: '子节点1'},
|
||||||
|
{id: 333, name: '子节点3'}
|
||||||
|
];
|
||||||
|
callback(nodeList);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
|
|
|
@ -27,7 +27,10 @@ toc: true
|
||||||
| [treeTable.render(options)](#render) | treeTable 组件渲染,核心方法。 |
|
| [treeTable.render(options)](#render) | treeTable 组件渲染,核心方法。 |
|
||||||
| [treeTable.reload(id, options)](#reload) | 树表完整重载。 |
|
| [treeTable.reload(id, options)](#reload) | 树表完整重载。 |
|
||||||
| [treeTable.reloadData(id, options)](#reload) | 树表数据重载。 |
|
| [treeTable.reloadData(id, options)](#reload) | 树表数据重载。 |
|
||||||
|
| [treeTable.reloadAsyncNode(id, index)](#reloadAsyncNode) | 重载异步子节点 |
|
||||||
| [treeTable.getData(id, isSimpleData)](#getData) | 获取树表数据。 |
|
| [treeTable.getData(id, isSimpleData)](#getData) | 获取树表数据。 |
|
||||||
|
| [treeTable.getNodeById(id)](#getNodeById) | 获取节点信息集 |
|
||||||
|
| [treeTable.getNodesByFilter(id, filter, opts)](#getNodesByFilter) | 获取符合过滤规则的节点信息集 |
|
||||||
| [treeTable.getNodeDataByIndex(id, index)](#getNodeDataByIndex) | 通过行元素对应的 `data-index` 属性获取对应行数据。 |
|
| [treeTable.getNodeDataByIndex(id, index)](#getNodeDataByIndex) | 通过行元素对应的 `data-index` 属性获取对应行数据。 |
|
||||||
| [treeTable.updateNode(id, index, data)](#updateNode) | 更新行数据。 |
|
| [treeTable.updateNode(id, index, data)](#updateNode) | 更新行数据。 |
|
||||||
| [treeTable.removeNode(id, index)](#removeNode) | 删除行记录。 |
|
| [treeTable.removeNode(id, index)](#removeNode) | 删除行记录。 |
|
||||||
|
@ -69,6 +72,30 @@ toc: true
|
||||||
使用方式与 `table` 组件完全相同,具体用法可参考:[table 重载](../table/#reload)
|
使用方式与 `table` 组件完全相同,具体用法可参考:[table 重载](../table/#reload)
|
||||||
|
|
||||||
|
|
||||||
|
<h3 id="reloadAsyncNode" class="ws-anchor ws-bold">重载异步子节点</h3>
|
||||||
|
|
||||||
|
`treeTable.reloadAsyncNode(id, index)`
|
||||||
|
|
||||||
|
- 参数 `id` : treeTable 渲染时的 id 属性值
|
||||||
|
- 参数 `index` : 节点对应的行下标,一般可通过 `<tr>` 元素的 `data-index` 属性获得
|
||||||
|
|
||||||
|
该方法用于在异步模式下,对节点进行重载。
|
||||||
|
|
||||||
|
```js
|
||||||
|
// 渲染
|
||||||
|
treeTable.render({
|
||||||
|
elem: '', // 绑定元素选择器
|
||||||
|
id: 'test', // 自定义 id 索引
|
||||||
|
async: {
|
||||||
|
enable: true // 开启异步加载模式
|
||||||
|
}
|
||||||
|
// 其他属性 …
|
||||||
|
});
|
||||||
|
// 重载子节点
|
||||||
|
treeTable.reloadAsyncNode('test', 0); // 第一行
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
<h3 id="getData" lay-pid="api" class="ws-anchor ws-bold">获取树表数据</h3>
|
<h3 id="getData" lay-pid="api" class="ws-anchor ws-bold">获取树表数据</h3>
|
||||||
|
|
||||||
`treeTable.getData(id, isSimpleData);`
|
`treeTable.getData(id, isSimpleData);`
|
||||||
|
@ -90,6 +117,52 @@ var data = treeTable.getData('test'); // 获取第一行的数据
|
||||||
console.log(data);
|
console.log(data);
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<h3 id="getNodeById" lay-pid="api" class="ws-anchor ws-bold">获取节点信息集</h3>
|
||||||
|
|
||||||
|
`treeTable.getNodeById(id)`
|
||||||
|
|
||||||
|
- 参数 `id` : treeTable 渲染时的 `id` 属性值
|
||||||
|
|
||||||
|
```js
|
||||||
|
// 渲染
|
||||||
|
treeTable.render({
|
||||||
|
elem: '', // 绑定元素选择器
|
||||||
|
id: 'test', // 自定义 id 索引
|
||||||
|
// 其他属性 …
|
||||||
|
});
|
||||||
|
// 获取节点信息集
|
||||||
|
var obj = treeTable.getNodeById('test');
|
||||||
|
console.log(obj);
|
||||||
|
```
|
||||||
|
|
||||||
|
<h3 id="getNodesByFilter" lay-pid="api" class="ws-anchor ws-bold">获取符合过滤规则的节点信息集</h3>
|
||||||
|
|
||||||
|
`treeTable.getNodesByFilter(id, filter, opts)`
|
||||||
|
|
||||||
|
- 参数 `id` : treeTable 渲染时的 `id` 属性值
|
||||||
|
- 参数 `filter` : 过滤函数
|
||||||
|
- 参数 `opts` : 该方法的属性可选项,详见下表:
|
||||||
|
|
||||||
|
| 属性名 | 描述 | 类型 | 默认值 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| isSingle | 是否只找到第一个 | boolean | `false` |
|
||||||
|
| parentNode | 在指定在某个父节点下的子节点中搜索 | object | - |
|
||||||
|
|
||||||
|
```js
|
||||||
|
// 渲染
|
||||||
|
treeTable.render({
|
||||||
|
elem: '', // 绑定元素选择器
|
||||||
|
id: 'test', // 自定义 id 索引
|
||||||
|
// 其他属性 …
|
||||||
|
});
|
||||||
|
// 获取节点信息集
|
||||||
|
var obj = treeTable.getNodesByFilter('test', function(item){
|
||||||
|
// 自定义过滤条件
|
||||||
|
return item.id > 1000;
|
||||||
|
});
|
||||||
|
console.log(obj);
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
<h3 id="getNodeDataByIndex" lay-pid="api" class="ws-anchor ws-bold">获取树表对应下标的数据</h3>
|
<h3 id="getNodeDataByIndex" lay-pid="api" class="ws-anchor ws-bold">获取树表对应下标的数据</h3>
|
||||||
|
|
||||||
|
@ -107,9 +180,9 @@ treeTable.render({
|
||||||
id: 'test', // 自定义 id 索引
|
id: 'test', // 自定义 id 索引
|
||||||
// 其他属性 …
|
// 其他属性 …
|
||||||
});
|
});
|
||||||
// 获取当前页接口数据
|
// 获取树表对应下标的数据
|
||||||
var data = treeTable.getNodeDataByIndex('test', 0); // 获取第一行的数据
|
var obj = treeTable.getNodeDataByIndex('test', 0); // 获取第一行的数据
|
||||||
console.log(data);
|
console.log(obj);
|
||||||
```
|
```
|
||||||
|
|
||||||
<h3 id="updateNode" lay-pid="api" class="ws-anchor ws-bold">更新行数据</h3>
|
<h3 id="updateNode" lay-pid="api" class="ws-anchor ws-bold">更新行数据</h3>
|
||||||
|
@ -244,8 +317,8 @@ treeTable.expandAll('test', false); // 关闭全部节点
|
||||||
| opts | 描述 | 类型 | 默认值 |
|
| opts | 描述 | 类型 | 默认值 |
|
||||||
| --- | --- | -- | --- |
|
| --- | --- | -- | --- |
|
||||||
| index | 要设置选中状态的行下标或行数据 | number/object | - |
|
| index | 要设置选中状态的行下标或行数据 | number/object | - |
|
||||||
| checked | 选中状态。`true` 选中;`false` 取消选中;`null` 切换。 其中,所为 `radio` 框,则不支持 `null`(切换)。 | boolean | DDD |
|
| checked | 选中状态。`true` 选中;`false` 取消选中;`null` 切换。 其中,所为 `radio` 框,则不支持 `null`(切换)。 | boolean | - |
|
||||||
| callbackFlag | 是否触发事件,若为 `true`,则 `checked: false` 无效。其对应的事件跟 `table` 的 `radio,checkbox` 事件用法一样 | boolean | DDD |
|
| callbackFlag | 是否触发事件,若为 `true`,则 `checked: false` 无效。其对应的事件跟 `table` 的 `radio,checkbox` 事件用法一样 | boolean | `false` |
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// 渲染
|
// 渲染
|
||||||
|
|
Loading…
Reference in New Issue