Primeng table 基于嵌套 json 对象的排序和过滤

Question

我在我的应用程序中使用 primeng table 在 table 中显示数据。我的数据有一些嵌套的 json 对象。我正在尝试根据嵌套的 json 对象对 table 进行排序和过滤，但无法找到这样做的方法。请帮忙。提前致谢。

这是我的 json:

[
   {
      "roll-number":"45",
      "name":"Ron",
      "subject-info":[
         {
            "subject-marks-":"40",
            "subject-name":"English"
         }
      ]
   },
   {
      "roll-number":"46",
      "name":"Daryl",
      "subject-info":[
         {
            "subject-marks":"20",
            "subject-name":"English"
         }
      ]
   }
]

这是我的列数组：

 this.cols = [
      { header: 'Student Name', field: 'name' },
      { header: 'Student Roll No', field: 'roll-number' },
      { header: 'Subject name', field: 'subject-info',subfield:'subject-name' },
      { header: 'Subject marks', field: 'subject-info',subfield:'subject-marks' },
        ];

这是我的模板：

    <p-table [columns]="cols" #dt [value]="studentData" >
<ng-template pTemplate="caption">
            <div style="text-align: right">
                <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
                <input type="text" pInputText size="30" placeholder="Search" (input)="dt.filterGlobal($event.target.value, 'contains')" [value]="dt.filters['global']?.value" style="width:auto">
                
            </div>
        </ng-template>
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns " [pSortableColumn]="col.field " class="row-header ">
                    {{col.header}}
                    <p-sortIcon class=" " [field]="col.field " ariaLabel="Activate to sort " ariaLabelDesc="Activate to sort in descending order " ariaLabelAsc="Activate to sort in ascending order ">
                    </p-sortIcon>
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-data let-columns="columns ">
            <tr class="center-text ">
                <td *ngFor="let col of columns " class="row-cell ">
                    <div *ngIf="col.subfield && data[col.field].length!=0;then nested_object_content else normal_content"></div>
                    <ng-template #nested_object_content>
    
                        {{data[col.field][0][col.subfield]}}
                    </ng-template>
                    <ng-template #normal_content>
                        {{data[col.field]}}
                    </ng-template>
                </td>
            </tr>
        </ng-template>
    </p-table>

目前，如果我尝试根据主题标记或主题名称列进行排序，table 会使用主题信息字段进行排序，因为 sortcol 是 col.field。我正在尝试根据用户的主题标记或主题名称对 table 进行排序。

使用上述列中的值进行过滤也returns一个空响应。

Answer 1

您可以尝试通过为 table 实现自定义排序和自定义过滤器来实现。

自定义排序 (documentation):

<p-table [value]="products3" (sortFunction)="customSort($event)" [customSort]="true">
  <ng-template pTemplate="header">
    <tr>
      <th pSortableColumn="code">Code
        <p-sortIcon field="code"></p-sortIcon>
      </th>
      <th pSortableColumn="name">Name
        <p-sortIcon field="name"></p-sortIcon>
      </th>
      <th pSortableColumn="category">Category
        <p-sortIcon field="category"></p-sortIcon>
      </th>
      <th pSortableColumn="quantity">Quantity
        <p-sortIcon field="quantity"></p-sortIcon>
      </th>
      <th pSortableColumn="price">Price
        <p-sortIcon field="price"></p-sortIcon>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-product>
    <tr>
      <td>{{product.code}}</td>
      <td>{{product.name}}</td>
      <td>{{product.category}}</td>
      <td>{{product.quantity}}</td>
      <td>{{product.price | currency: 'USD'}}</td>
    </tr>
  </ng-template>
</p-table>

customSort(event: SortEvent) {
  event.data.sort((data1, data2) => {
    let value1 = data1[event.field];
    let value2 = data2[event.field];
    let result = null;

    if (value1 == null && value2 != null)
      result = -1;
    else if (value1 != null && value2 == null)
      result = 1;
    else if (value1 == null && value2 == null)
      result = 0;
    else if (typeof value1 === 'string' && typeof value2 === 'string')
      result = value1.localeCompare(value2);
    else
      result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;

    return (event.order * result);
  });
}

自定义过滤器（documentation）：

<ng-template pTemplate="header" let-columns>
  <tr>
    <th *ngFor="let col of columns">
      {{col.header}}
    </th>
  </tr>
  <tr>
    <th *ngFor="let col of columns" [ngSwitch]="col.field">
      <input *ngSwitchCase="'price'" pInputText type="text" placeholder="Custom - Greater Than" (input)="dt.filter($event.target.value, col.field, 'custom')">
    </th>
  </tr>
</ng-template>

FilterUtils['custom'] = (value, filter): boolean => {
  if (filter === undefined || filter === null || filter.trim() === '') {
    return true;
  }

  if (value === undefined || value === null) {
    return false;
  }

  return parseInt(filter) > value;
}

Primeng table 基于嵌套 json 对象的排序和过滤

Primeng table sorting & filtering based on nested json objects

html

javascript

typescript

primeng

angular