樹(shù)形表格( TreeGrid )用于以網(wǎng)格形式顯示分層數(shù)據(jù)。 樹(shù)形表格( TreeGrid )基于數(shù)據(jù)網(wǎng)格( DataGrid ),并結(jié)合樹(shù)視圖和可編輯網(wǎng)格。 樹(shù)形表格( TreeGrid )允許用戶(hù)創(chuàng)建可定制、可異步展開(kāi)的行,并能夠以多列形式顯示分層數(shù)據(jù)。
名稱(chēng) | 數(shù)據(jù)類(lèi)型 | 作用描述 | 默認(rèn)值 |
---|---|---|---|
idField | string | 指示哪個(gè)字段是標(biāo)識(shí)字段。 | null |
treeField | string | 指示哪個(gè)字段是樹(shù)節(jié)點(diǎn)字段。 | null |
selectionMode | string | 選擇模式。 | single |
checkbox | boolean | 是否在每行節(jié)點(diǎn)之前顯示復(fù)選框。 | false |
cascadeCheck | boolean | 是否進(jìn)行級(jí)聯(lián)檢查。 | true |
名稱(chēng) | 參數(shù) | 作用描述 |
---|---|---|
onRowExpand | row | 當(dāng)行被擴(kuò)充時(shí)觸發(fā)。 |
onRowCollapse | row | 當(dāng)行被折疊時(shí)觸發(fā)。 |
onRowCheck | row | 檢查行時(shí)觸發(fā)。 |
onRowUncheck | row | 未選中行時(shí)觸發(fā)。 |
onCheckChange | rows | 更改選中的行時(shí)觸發(fā)。 |
名稱(chēng) | 參數(shù) | 返回值 | 作用描述 |
---|---|---|---|
getCheckedRows | state=checked | array | 獲取已檢查的行。 可用的“狀態(tài)”有:“checked”、 “unchecked”、 “indeterminate”。 |
sortData | none | void | 對(duì)數(shù)據(jù)行進(jìn)行排序。 |
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>
更多建議: