问题
I'm simply trying to add 2 buttons to expand and collapse all groups in my code using primeNG. Here's my working code:
PLUNKER
<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>
回答1:
Use expandedRowsGroups
property and assign it an array containing the group headers to be displayed or not.
expandedRowsGroups : Collection of group field values to show a group as expanded by default.
Fill or unfill expandedGroups
array when clicking on the buttons :
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>
See working Plunker
回答2:
<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"
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://stackoverflow.com/questions/48170243/how-to-expand-collapse-groups-using-primeng