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

2020-06-24 17:27 更新

屬性列表

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

事件列表

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

字段列表

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

方法列表

名稱 參數(shù) 返回值 作用描述
sortData none void 對數(shù)據(jù)行進行排序。
collapseGroup value:any void 一組折疊。。
expandGroup value:any void 擴展一組。
toggleGroup value:any void 一組切換。
collapseRow row:any void 折疊一行。
expandRow row:any void 擴充一行。
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)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號