Question

我在角度4应用程序中使用primeNG数据表。我想基于所选字段执行行分组。例如，如果用户点击经销商区域，则数据应按经销商区域分组，如果用户点击经销商状态，则数据应根据经销商状态进行分组。

参考：https://www.primefaces.org/primeng/#/datatable/rowgroup

我的观点（HTML）文件

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

组件类

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'; 

   }


}

我想将组件的groupField变量与data table的groupField属性绑定。我成功实现了静态行分组。但要求是在用户点击分组选项时对数据进行分组。

我也尝试在组件中使用数据表引用，并且从组件更改datatable属性也不起作用。

this.dt.groupField = 'dealerState';

寻找解决方案。提前谢谢。

Answer 1

这可能不是最好的解决方案，但它有效。要使动态行分组起作用，我们必须在更改groupField后刷新整个数据表。

要刷新表，请使用布尔变量来控制数据表的可见性并使用setTimeout。

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

在.ts文件中，每当您更改行分组字段时，

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

Answer 2

您可以克隆审核列表

这是列表的深层副本

this.auditList = _.cloneDeep(this.auditList);

这是列表的浅表副本

this.auditList = [...this.auditList];

如何在PrimeNG Datatable上动态进行行分组？

2 个答案: