閱讀(1.9k) 書簽贊(0) 我要糾錯

Angular EasyUI 樹形表格

2020-06-24 17:27 更新

樹形表格（ TreeGrid ）用于以網(wǎng)格形式顯示分層數(shù)據(jù)。樹形表格（ TreeGrid ）基于數(shù)據(jù)網(wǎng)格（ DataGrid ），并結(jié)合樹視圖和可編輯網(wǎng)格。樹形表格（ TreeGrid ）允許用戶創(chuàng)建可定制、可異步展開的行，并能夠以多列形式顯示分層數(shù)據(jù)。

屬性列表

名稱	數(shù)據(jù)類型	作用描述	默認(rèn)值
idField	string	指示哪個字段是標(biāo)識字段。	null
treeField	string	指示哪個字段是樹節(jié)點字段。	null
selectionMode	string	選擇模式。	single
checkbox	boolean	是否在每行節(jié)點之前顯示復(fù)選框。	false
cascadeCheck	boolean	是否進(jìn)行級聯(lián)檢查。	true

事件列表

名稱	參數(shù)	作用描述
rowExpand	row	當(dāng)行被擴充時觸發(fā)。
rowCollapse	row	當(dāng)行被折疊時觸發(fā)。
rowCheck	row	檢查行時觸發(fā)。
rowUncheck	row	未選中行時觸發(fā)。

字段列表

名稱	類型	作用描述
checkedRows	any[ ]	所有勾選過的行。

方法列表

名稱	參數(shù)	返回值	作用描述
sortData	none	void	對數(shù)據(jù)行進(jìn)行排序。
checkRow	row	void	選中一行。
uncheckRow	row	void	取消選中一行。

注：
- 繼承： GridBaseComponent 。
- 選擇器： eui-treegrid 。

使用方法

<eui-treegrid style="height:250px"
        [data]="data" idField="id" treeField="name">
    <eui-grid-column field="name" title="Name"></eui-grid-column>
    <eui-grid-column field="size" title="Size"></eui-grid-column>
    <eui-grid-column field="date" title="Date"></eui-grid-column>
</eui-treegrid>