Comment faire un regroupement dynamique de lignes sur PrimeNG Datatable?

Question

J'utilise PrimeNG datatable dans l'application angulaire 4. Je souhaite effectuer un regroupement de lignes en fonction du champ sélectionné. Par exemple, si l'utilisateur clique sur la région du concessionnaire, alors les données doivent être groupées par région de concessionnaire, si l'utilisateur clique sur l'état du concessionnaire alors les données doivent être groupées en fonction de l'état du concessionnaire.

Référence: https://www.primefaces.org/primeng/#/datatable/rowgroup

Mon point de vue (HTML) fichier

<div id ="default"><span (click)="default()">Default</span></div> 
<div id ="region"><span (click)="groupByDealerRegion()">Dealer Region</span></div> 
<div id ="state"><span (click)="groupByDealerState()">Dealer State</span></div> 


<p-dataTable #dt1 [value]="(auditList | orderBy: {property: 'dealerCode', direction: 1})" rowGroupMode="subheader" sortField = '{{groupField}}' groupField='{{groupField}}' 
     expandableRowGroups="true" id="datatable" name="datatable" exportFilename="Audits-list" [sortableRowGroup]="false" > 
     <p-header> 
     <div class="ui-helper-clearfix"> 
      <button type="button" pButton icon="fa-file-o" iconPos="left" label="CSV" (click)="dt.exportCSV()" style="float:left"></button> 
     </div> 
    </p-header> 
    <ng-template pTemplate="rowgroupheader" let-rowData>{{rowData[groupField]}}</ng-template> 

    <p-column field="dealerCode" header="Dealer Code" ></p-column> 
    <p-column field="dealerName" header="Dealer Name"></p-column> 
    <p-column field="auditType" header="Audit Type"></p-column> 
    <p-column field="auditOnSite" header="Audit On-SIte"></p-column> 

</p-dataTable> 

classe Component

export class AuditListViewComponent implements OnInit { 


    groupField: string = 'auditType'; 

    @ViewChild(DataTable) dt: DataTable; 

    constructor(private sessionService : SessionService,private auditService : AuditService){ 

    } 

    auditList: AuditDetail[] = []; 

    ngOnInit(): void { 
     this.getAuditList(); 

    } 

    getAuditList(){ 
    this.auditService.getAuditList().then(auditList => { 
     this.auditList = auditList;   

    }); 
    } 



    groupByDealerRegion(){     

    this.sortedField = "dealerRegion"; 
    this.groupField = "dealerRegion" ; 

    } 

    groupByDealerState(){ 

    this.sortedField = "dealerState"; 
    this.groupField = "dealerState" ; 
    } 

    default(){ 
    console.log("default() --->>>"); 

    console.log(this.dt); 
    this.groupField = 'auditType'; 

    } 


} 

Je veux lier la variable de GroupField de composant avec l'attribut GroupField de la table de données. J'ai implémenté avec succès le groupement de lignes statique. Mais l'exigence est de regrouper les données lorsque l'utilisateur clique sur l'option de regroupement.

J'ai également essayé d'utiliser la référence datatable dans le composant et de modifier l'attribut datatable du composant ne fonctionne pas.

this.dt.groupField = 'dealerState'; 

Recherche de solution. Merci d'avance.

Answer 1

Ce n'est peut-être pas la meilleure solution, mais cela fonctionne. Pour que le regroupement de lignes dynamique fonctionne, nous devons actualiser la totalité de la base de données, après avoir modifié le champ groupField.

Pour actualiser la table, utilisez une variable booléenne pour contrôler la visibilité de la datatable et utiliser setTimeout.

<p-dataTable *ngIf="display"></p-dataTable> 

Dans le fichier .ts, chaque fois que vous modifiez le champ de regroupement ligne,

this.display = false;  
setTimeout(() => this.display = true, 0);