如何使用PrimeNG扩展/折叠组? [英] How to expand/collapse groups using PrimeNG?

问题描述

我只是想使用primeNG在我的代码中的所有组中扩展和折叠中添加2个按钮.这是我的工作代码:

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>

推荐答案

使用 expandedRowsGroups 属性，并为其分配一个包含要显示或不显示的组标题的数组.

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.

---

点击按钮时，

填充或取消填充 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>

查看正在运行的柱塞

这篇关于如何使用PrimeNG扩展/折叠组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！