Question

我在我的应用程序中使用primeng表在表中显示数据。我的数据有一些嵌套的json对象。我正在尝试基于嵌套的json对象对表进行排序和过滤，但找不到解决方法。请帮忙。预先感谢。

这是我的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"
         }
      ]
   }
]

这是我的cols数组：

 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>

如果我尝试根据主题标记或主题名称列进行排序，则由于sortcol是col.field，因此该表将使用subject-info字段进行排序。我试图根据用户对主题标记或主题名称进行排序。使用上述列中的值进行过滤也会返回空响应。

Answer 1

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

自定义排序（documentation）：

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);
  });
}

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

自定义过滤器（documentation）：

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

user_id,
privilege_id
house_group_id,

基于嵌套json对象的primeng表排序和过滤

1 个答案: