Question

我有一个p-table，它使用行分组和过滤功能。这些功能本身可以正常工作，但是当我一起使用它们时，应用任何过滤器后，分组的第一列就会消失。这在所有分组类型（子标题，行间距等）上都会发生。

下面的代码显示了一个包含四列的简单表，其中第一列（EmpName）被分组为Rowspan。一个简单的过滤器已应用于每列。表格首次显示时，看起来不错。在过滤器中输入任何内容后，第一个值（empName）就会消失，并且值会出现偏差，即第二列的值会显示在第一列中，依此类推。任何帮助或指针将不胜感激。谢谢！

<h3>Rowspan</h3>
<p-table  #dt [columns]="cols" [value]="empList" sortField="empName"  sortMode="single" (onSort)="onSort()">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                {{col.header}}
                <p-sortIcon [field]="col.field"></p-sortIcon>
            </th>
        </tr>
        <tr>
            <th *ngFor="let col of columns" [ngSwitch]="col.field">
                <input *ngSwitchCase="'empName'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)">
                <input *ngSwitchCase="'empNbr'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)">
                <input *ngSwitchCase="'empDept'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)">
                <input *ngSwitchCase="'empHrs'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)">
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
        <tr>
            <td *ngIf="rowGroupMetadata[rowData.empName].index === rowIndex" [attr.rowspan]="rowGroupMetadata[rowData.empName].size">
                {{rowData.empName}}
            </td>
            <td>{{rowData.empNbr}}</td>
            <td>{{rowData.empDept}}</td>
            <td>{{rowData.empHrs}}</td>
        </tr>
    </ng-template>
</p-table>

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';
import {SelectItem} from 'primeng/api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  empList: any = [];
  rowGroupMetadata: any;
  cols: any[];

  constructor() {}

  ngOnInit(): void {

    this.empList = [
      {empName:'John Smith', empNbr:1111, empDept:'Finance', empHrs:16},
      {empName:'John Smith', empNbr:1111, empDept:'Finance', empHrs:5},
      {empName:'John Smith', empNbr:1111, empDept:'Finance', empHrs:8},
      {empName:'Tom Smith', empNbr:2222, empDept:'Admin', empHrs:12},
      {empName:'Tom Smith', empNbr:2222, empDept:'Admin', empHrs: 10},
      {empName:'Bob Smith', empNbr:3333, empDept:'Marketing', empHrs: 8},
      {empName:'Bob Smith', empNbr:3333, empDept:'Marketing', empHrs: 12},
      {empName:'Bob Smith', empNbr:3333, empDept:'Marketing', empHrs: 20},
      {empName:'Bob Smith', empNbr:3333, empDept:'Marketing', empHrs: 22},
      {empName:'Mary Smith', empNbr:4444, empDept:'Sales', empHrs: 28},
    ];

    this.cols = [
      { field: 'empName', header: 'EmpName'},
      { field: 'empNbr', header: 'EmpNbr'},
      { field: 'empDept', header: 'EmpDept'},
      { field: 'empHrs', header: 'EmpHrs'}
    ];

    this.updateRowGroupMetaData();
  }

  onSort() {
    this.updateRowGroupMetaData();
  }

  updateRowGroupMetaData() {
    this.rowGroupMetadata = {};
    if (this.empList) {
        for (let i = 0; i < this.empList.length; i++) {
            let rowData = this.empList[i];
            let empName = rowData.empName;
            if (i == 0) {
                this.rowGroupMetadata[empName] = { index: 0, size: 1 };
            }
            else {
                let previousRowData = this.empList[i - 1];
                let previousRowGroup = previousRowData.empName;
                if (empName === previousRowGroup)
                    this.rowGroupMetadata[empName].size++;
                else
                    this.rowGroupMetadata[empName] = { index: i, size: 1 };
            }
        }
        console.log(this.rowGroupMetadata);
    }
  }

}

Answer 1

您可以编写自定义过滤器。在您的组件方面。

PrimeNg Turbotable过滤器不适用于行组

1 个答案: