Динамическая фильтрация столбцов PrimeNG

В настоящее время у меня есть следующая таблица PrimeNG TurboTable:

<p-table [value]="People" >
  <ng-template pTemplate="header">
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Height</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-col>
    <tr>
      <td>{{col.Name}}</td>
      <td>{{col.Age}}</td>
      <td>{{col.Height}}</td>
    </tr>
  </ng-template>
</p-table>

Мне нужно иметь возможность фильтровать по столбцу «Возраст» при загрузке страницы, как мне это сделать? Во всех примерах, которые я смог найти, используется тег (input) или (onChange) примерно так (взято с их веб-сайта):

<input type="text" pInputText size="50" placeholder="Global Filter" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">

Как я могу фильтровать по столбцу при загрузке, а не при изменении элемента?

Вот страница, на которую я ссылаюсь: https://www.primefaces.org/primeng/#/table/filter

Благодарю вас!


typescript angular primeng angular5 primeng-turbotable
person Josh    schedule 21.02.2018    source источник
comment
Выполните filterGlobal() на ngOnInit() с filter criteria по мере необходимости.   -  person Abhijit Muke    schedule 09.03.2018
comment
К сожалению, функция filterGlobal() будет фильтровать все, тогда как я хочу отфильтровать только определенный столбец, оставив глобальный фильтр доступным. Или у вас есть пример, как отфильтровать один столбец с помощью метода filterGlobal?   -  person Josh    schedule 16.03.2018

Ответы (2)


arrow_upward
12
arrow_downward

При использовании статических столбцов необходимо указать имя столбца для фильтра на уровне таблицы. Добавьте [globalFilterFields]="['Age']" на уровне таблицы.

 <p-table #dt [value]="data" [globalFilterFields]="['Age']">
                <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="50" placeholder="Global Filter" (input)="dt.filterGlobal($event.target.value, 'contains')"
                            style="width:auto">
                    </div>
                </ng-template>
                <ng-template pTemplate="header">
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Height</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-col>
                    <tr>
                        <td>{{col.Name}}</td>
                        <td>{{col.Age}}</td>
                        <td>{{col.Height}}</td>
                    </tr>
                </ng-template>
            </p-table>
person Shailesh Sangekar    schedule 26.07.2018
comment
Помните, что имена полей, такие как aFieldName, которые вы даете, являются dataItem.aFieldName в приведенном выше случае с let-col это поля, содержащиеся в col - person Pipo; 19.01.2021

arrow_upward
6
arrow_downward 

<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="'vin'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)">
            <div *ngSwitchCase="'year'">
                {{yearFilter}}
                <i class="fa fa-close" (click)="yearFilter=null;dt.filter(null, col.field, col.filterMatchMode)" style="cursor:pointer"></i>
                <p-slider [style]="{'width':'100%','margin-top':'8px'}" [(ngModel)]="yearFilter" [min]="1970" [max]="2010" (onChange)="onYearChange($event, dt)"></p-slider>
            </div>
            <p-dropdown *ngSwitchCase="'brand'" [options]="brands" [style]="{'width':'100%'}" (onChange)="dt.filter($event.value, col.field, 'equals')"></p-dropdown>
            <p-multiSelect *ngSwitchCase="'color'" [options]="colors" defaultLabel="All Colors" (onChange)="dt.filter($event.value, col.field, 'in')"></p-multiSelect>
        </th>
    </tr>
</ng-template>

Для глобального фильтра — (input)="dt.filterGlobal($event.target.value, 'contains')"

Для фильтра столбцов — (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)"

person Abhijit Muke    schedule 19.03.2018
comment
Это было скопировано из документов Primeng. primefaces.org/primeng/#/table/filter - person Nanotron; 06.02.2019