阅读(399) (0)

Angular EasyUI 数据表格

2020-06-24 17:16:45 更新

属性列表

名称 数据类型 作用描述 默认值
idField string 指示哪个字段是标识字段。 null
groupField string 指示要分组的字段。 null
expanderWidth number 展开列宽。 30

事件列表

名称 参数 作用描述
rowExpand row:any 在展开行时触发。
rowCollapse row:any 当行被折叠时触发。
groupExpand value:any, rows:any[], collapsed:boolean 在展开组时触发。
groupCollapse value:any, rows:any[], collapsed:boolean 在组折叠时触发。

字段列表

名称 类型 作用描述
groupTemplate groupTemplate 一组模板。
detailTemplate DetailTemplateDirective 详细模板。

方法列表

名称 参数 返回值 作用描述
sortData none void 对数据行进行排序。
collapseGroup value:any void 一组折叠。。
expandGroup value:any void 扩展一组。
toggleGroup value:any void 一组切换。
collapseRow row:any void 折叠一行。
expandRow row:any void 扩充一行。
toggleRow row:any void 连续切换。

注:
- 继承: 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>