Angular EasyUI 數(shù)據(jù)表格

2020-06-24 17:27 更新

屬性列表

名稱 數(shù)據(jù)類型 作用描述 默認(rèn)值
idField string 指示哪個(gè)字段是標(biāo)識(shí)字段。 null
groupField string 指示要分組的字段。 null
expanderWidth number 展開(kāi)列寬。 30

事件列表

名稱 參數(shù) 作用描述
rowExpand row:any 在展開(kāi)行時(shí)觸發(fā)。
rowCollapse row:any 當(dāng)行被折疊時(shí)觸發(fā)。
groupExpand value:any, rows:any[], collapsed:boolean 在展開(kāi)組時(shí)觸發(fā)。
groupCollapse value:any, rows:any[], collapsed:boolean 在組折疊時(shí)觸發(fā)。

字段列表

名稱 類型 作用描述
groupTemplate groupTemplate 一組模板。
detailTemplate DetailTemplateDirective 詳細(xì)模板。

方法列表

名稱 參數(shù) 返回值 作用描述
sortData none void 對(duì)數(shù)據(jù)行進(jìn)行排序。
collapseGroup value:any void 一組折疊。。
expandGroup value:any void 擴(kuò)展一組。
toggleGroup value:any void 一組切換。
collapseRow row:any void 折疊一行。
expandRow row:any void 擴(kuò)充一行。
toggleRow row:any void 連續(xù)切換。

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

使用方法

<eui-datagrid [data]="data" style="height:250px">
    <eui-grid-column field="itemid" title="Item ID"></eui-grid-column>
    <eui-grid-column field="name" title="Name"></eui-grid-column>
    <eui-grid-column field="listprice" title="List Price" align="right"></eui-grid-column>
    <eui-grid-column field="unitcost" title="Unit Cost" align="right"></eui-grid-column>
    <eui-grid-column field="attr" title="Attribute" width="30%"></eui-grid-column>
    <eui-grid-column field="status" title="Status" align="center"></eui-grid-column>
</eui-datagrid>
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)