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. 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

标签

javascript

angular

typescript

primeng