Question

我只是尝试使用primeNG向代码中的展开和折叠添加2个按钮。这是我的工作代码：

this.chartDataNGX.push( 
  {"name": "TEST2","series": [
      {"name": "Target","value": 40632},
      {"name": "Actual","value": 36953}, 
      {"name": "Projected","value": 31476}
  ]}, 
  {"name": "TEST3","series": [
      {"name": "Target","value": 40632}, 
      {"name": "Actual","value": 36953}, 
      {"name": "Projected","value": 31476}
      ]
  });

Answer 1

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

expandedRowsGroups：组字段值的集合，用于将组显示为默认展开。

单击按钮时填充或取消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>

见工作Plunker

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/

如何使用PrimeNG扩展/折叠组？

2 个答案: