React EasyUI 树形表格
树形表格（ TreeGrid ）用于以网格形式显示分层数据。 树形表格（ TreeGrid ）基于数据网格（ DataGrid ），并结合树视图和可编辑网格。 树形表格（ TreeGrid ）允许用户创建可定制、可异步展开的行，并能够以多列形式显示分层数据。
属性列表
| 名称 | 数据类型 | 作用描述 | 默认值 |
|---|---|---|---|
| idField | string | 指示哪个字段是标识字段。 | null |
| treeField | string | 指示哪个字段是树节点字段。 | null |
| selectionMode | string | 选择模式。 | single |
| checkbox | boolean | 是否在每行节点之前显示复选框。 | false |
| cascadeCheck | boolean | 是否进行级联检查。 | true |
事件列表
| 名称 | 参数 | 作用描述 |
|---|---|---|
| onRowExpand | row | 当行被扩充时触发。 |
| onRowCollapse | row | 当行被折叠时触发。 |
| onRowCheck | row | 检查行时触发。 |
| onRowUncheck | row | 未选中行时触发。 |
| onCheckChange | rows | 更改选中的行时触发。 |
方法列表
| 名称 | 参数 | 返回值 | 作用描述 |
|---|---|---|---|
| getCheckedRows | state=checked | array | 获取已检查的行。 可用的“状态”有:“checked”、 “unchecked”、 “indeterminate”。 |
| sortData | none | void | 对数据行进行排序。 |
| checkRow | row | void | 选中一行。 |
| uncheckRow | row | void | 取消选中一行。 |
注：
- 继承： GridBase 。
使用方法
<TreeGrid
style={{ height: 250 }}
data={this.state.data}
idField="id"
treeField="name"
>
<GridColumn field="name" title="Name"></GridColumn>
<GridColumn field="size" title="Size"></GridColumn>
<GridColumn field="date" title="Date"></GridColumn>
</TreeGrid>- 参考图例：
