如何使用PrimeNG扩展/折叠组? [英] How to expand/collapse groups using PrimeNG?
本文介绍了如何使用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:
<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屋!
查看全文