如何使用PrimeNG擴展/折疊組？

Question

我只是試圖添加2個按鈕以使用primeNG 擴展和折疊代碼中的所有組。 這是我的工作代碼：

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>

Answer 1

使用expandedRowsGroups屬性，並為其分配一個包含要顯示或不顯示的組頭的數組。

expandRowsGroups：組字段值的集合，以顯示默認情況下展開的組。

---

單擊按鈕時填充或取消填充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');
  }

和相關按鈕：

<button (click)="expandAll()">Expand all</button>
<button (click)="collapseAll()">Collapse all</button>

查看工作柱塞

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

請注意，在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/