Angular EasyUI 数据表格
属性列表
| 名称 |
数据类型 |
作用描述 |
默认值 |
| 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>