[英]How to expand/collapse groups using PrimeNG?
I'm simply trying to add 2 buttons to expand and collapse all groups in my code using primeNG. 我只是试图添加2个按钮以使用primeNG 扩展和折叠代码中的所有组。 Here's my working code:
这是我的工作代码:
<p-dataTable [value]="data" sortField="room" rowGroupMode="subheader" groupField="room" expandableRowGroups="true"
[sortableRowGroup]="false">
<ng-template pTemplate="rowgroupheader" let-rowData>{{rowData.room}} - INFO</ng-template>
<p-column field="status" header="ID"></p-column>
<p-column field="name" header="Title"></p-column>
</p-dataTable>
Use expandedRowsGroups
property and assign it an array containing the group headers to be displayed or not. 使用
expandedRowsGroups
属性,并为其分配一个包含要显示或不显示的组头的数组。
expandedRowsGroups : Collection of group field values to show a group as expanded by default.
expandRowsGroups:组字段值的集合,以显示默认情况下展开的组。
Fill or unfill expandedGroups
array when clicking on the buttons : 单击按钮时填充或取消填充
expandedGroups
数组:
expandAll() {
this.expandedGroups = [];
this.expandedGroups.push('ROOM1');
this.expandedGroups.push('ROOM2');
this.expandedGroups.push('ROOM3');
}
collapseAll() {
this.expandedGroups.pop('ROOM1');
this.expandedGroups.pop('ROOM2');
this.expandedGroups.pop('ROOM3');
}
And relevant buttons : 和相关按钮:
<button (click)="expandAll()">Expand all</button>
<button (click)="collapseAll()">Collapse all</button>
<p-dataTable #dt [value]="data" sortField="room" rowGroupMode="subheader" groupField="room" rowGroupExpandMode="multiple" expandableRowGroups="true"
[sortableRowGroup]="false">
<ng-template pTemplate="rowgroupheader" let-rowData>{{rowData.room}} - INFO</ng-template>
<p-column field="status" header="ID"></p-column>
<p-column field="name" header="Title"></p-column>
</p-dataTable>
<button type="button" pButton (click)="expandAll(dt)" label="Expand All"></button>
<button type="button" pButton (click)="collapseAll(dt)" label="Collapse All"></button>
Notice adding the template reference #dt in the html along with rowGroupExpandMode="multiple" 请注意,在HTML中添加了模板引用#dt以及rowGroupExpandMode =“ multiple”
expandAll(dt: DataTable) {
dt['expandedRowsGroups'] = [];
Object.keys(dt.rowGroupMetadata).forEach((row)=>{
dt['expandedRowsGroups'].push(row);
});
}
expandAll(dt: DataTable) {
dt['expandedRowsGroups'] = [];
}
https://embed.plnkr.co/0o42Jb/ https://embed.plnkr.co/0o42Jb/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.