# 树形表格


### 1、树形表格
- 如果数据之间含有上下级关系，我们就可以将表格渲染成一个树状表格，如图所示：

![树形表格](http://oss.dev33.cn/sa-plus/tree-table-pre.png)


### 2、怎么做呢？
- 很简单，只需要声明表注释`[tree]`, 如下所示：

``` js 
	CREATE TABLE `sys_dept` (
		// ... 
	) COMMENT='部门表 [tree]';
```
- 只要在表注释里写上了 `[tree]`，就可以生成一个树形表格

### 3、参数详解
**其还有一些参数，用于指定各种数据**


- `idkey` = 指定哪个字段代表数据唯一标识，默认取表的主键，例如：`[tree idkey=id]`
- `fkey` = 指定哪个字段代表`[父id]`，默认值=`parent_id`，例如：`[tree fkey=parent_id]`
- `ckey` = 指定生成的代码中，子节点存储的字段名，默认值=`children`，例如：`[tree ckey=children]`
- `top` = 指定顶级数据`parent_id`字段应该取的值，默认`-1`，例如：`[tree top=-1]` 代表，当一行数据的`parent_id=-1`时，这行数据不是其他节点的子节点，而是一个顶级节点


注：以上参数均有默认值，当取值与参数默认值相同时均可以省略不写

**在需要拼接多个参数时，以如下格式填写：**
``` js
	[tree idkey=id, fkey=parent_id, ckey=children]
```


### 4、综合示例
-- 在演示sql文件中，表`sys_dept`即为树形表，可运行sql和代码生成器进行查看，其最终效果与最上方展示图类似


### 5、懒加载模式
- `[tree]`适用于表数据量少于1000的情形，因为其会在初始化时加载全表数据，这样会使得界面操作流畅，但是在数据量过多时造成页面卡顿现象
- 因此，如果你的表数据量大于1000或在将来的业务中预测将大于1000, 则推荐你打开懒加载模式 (点击展开按钮时，才会加载子级别数据)
- 如何打开懒加载模式呢？很简单，只需要将`[tree]` 更换为 `[tree-lazy]` 即可
- 如下所示：
```
	CREATE TABLE `sys_dept` (
		// ... 
	) COMMENT='部门表 [tree-lazy]';
```


- **其余参数均与 `[tree]` 一致**