Как отобразить сохраненные фильтры в заголовках с PrimeNG? - PullRequest
Новая
       4

Как отобразить сохраненные фильтры в заголовках с PrimeNG?

2 голосов
/ 05 ноября 2019

Я могу сохранить фильтры локально, используя stateStorage="local" stateKey="myKey". Поэтому, когда пользователь покидает компонент и возвращается, данные по-прежнему фильтруются на основе установленных фильтров.

Проблема в том, что пользователь не имеет представления о том, что он фильтрует, так как заголовки фильтров больше ничего ему не показывают, только метка по умолчанию. Я могу получить доступ к фильтрам через локальное хранилище и удалить их, используя localStorage.removeItem("myKey");, но я не могу понять, как заставить эту информацию фильтра отображаться в заголовках фильтров. Мы не используем lazyLoad, как предлагается в другом ответе. Вы могли бы подумать, что это будет сделано в любое время, когда сохранен фильтр, потому что незнание того, что вы фильтруете, кажется серьезным недостатком.

Для большей ясности я приложил ниже документацию по primeFaces. Если вы выберете «Красный», «Белый» и «Зеленый» из выпадающего списка с несколькими выборками, он отобразит выбранный вами фильтр в заголовке (Красный, Белый, Зеленый) выше. Мне нужно, чтобы эта информация отображалась каждый раз, когда пользователь входит в компонент, если у него есть сохраненные фильтры (как с вводом текста, так и с раскрывающимися списками).

https://www.primefaces.org/primeng/#/table/filter

Я использую множественный выборвыпадающие фильтры, ввод текста, а также фильтры календаря. Вот фрагмент HTML, который включает примеры этих трех типов фильтров: 

    <th *ngFor="let col of columns" [ngSwitch]="col.field">                                               
      <input *ngSwitchCase="'userID'" pInputText type="text" size="12" placeholder="contains" (input)="table.filter($event.target.value, col.field, col.filterMatchMode)" [value]="table.filters['userID'] ? table.filters['userID'].value : ''">       
      <div class="ui-g ui-fluid">
        <p-calendar #calendar1 class="ui-fluid" *ngSwitchCase="'myDate'" [monthNavigator]="true" [showOnFocus]="false" [yearNavigator]="true" yearRange="2010:2060" [showIcon]="true" 
          [showOtherMonths]="false" [showButtonBar]="true" [appendTo]="attach"  [style]="{'overflow': 'visible'}" 
          [(ngModel)]="calendar1Filter" 
          (ngModelChange)="table.filter($event, 'myDate', calendar1Option)"                                                                                 
          (onSelect)="table.filter($event, 'myDate', calendar1Option)">
            <p-footer>  
                <div class="ui-grid-row">
                    <div class="ui-grid-col-3"><label style="font-weight: bold; color: #337ab7">Mode:</label></div>                     
                    <div class="ui-grid-col-6"><p-dropdown [options]="calendar1Options" [style]="{'width':'60px', 'padding-top': '0px'}" [(ngModel)]="calendar1Option" (onChange)="onChangeModCalOpt(calendar1, 1)" ></p-dropdown> </div>
                </div>
             </p-footer>
         </p-calendar>   
       </div>                                  
      <div class="ui-fluid">
        <p-multiSelect *ngSwitchCase="'myDropdown'" appendTo="body" [options]="dropdownOptions" pInputText type="text" size="12" [style]="{'width':'100%'}" defaultLabel="All" [(ngModel)]="myDropdownFilter" (onChange)="table.filter($event.value, col.field, 'in')"></p-multiSelect>
      </div>
     </th>

Ответы [ 2 ]

0 голосов
/ 06 ноября 2019

Фильтры турбо таблиц могут быть доступны следующим образом. table.filters['myColumn']?.value. Вам нужно будет установить входные значения в заголовке, [value]="table.filters[col.field]?.value"

...
<tr>
    <th *ngFor="let col of columns" [ngSwitch]="col.field" class="ui-fluid">
        <input pInputText 
               type="text"
               (input)="table.filter($event.target.value, col.field, col.filterMatchMode)"
               [value]="table.filters[col.field]?.value">
    </th>
</tr>
...

https://www.primefaces.org/primeng/#/table/state

0 голосов
/ 05 ноября 2019

Я сделал это почти год назад;как вы увидите ниже, в нем был какой-то хитрый код, потому что элемент таблицы был ниже директивы *ngIf. Я не уверен, что ваш случай такой же, но если это так, вот что мне нужно было сделать, чтобы заставить его работать. В этом примере у меня есть fooTable, в котором есть пользовательский фильтр для столбца status.

foo.component.ts: 

import { ChangeDetectorRef, Component, ViewChild } from "@angular/core";

@Component({
    selector    : 'foo',
    templateUrl : 'foo.component.html'
})
export class FooComponent {
    // members /////////////////////////////////////////////////////////////////////////////////////////////////////////
    showFooTable: boolean  = true;
    statusFilter: string[] = [];

    // constructor(s) //////////////////////////////////////////////////////////////////////////////////////////////////
    constructor(private cd: ChangeDetectorRef) { }

    // getters and setters /////////////////////////////////////////////////////////////////////////////////////////////
    /**
     * Due to the Angular lifecycle, we have to do some tricky things here to pull the filters from the session,
     * if they are present. The workarounds done in this function are as follows:
     *
     * 1) Wait until the element is accessible. This is not until the *ngIf is rendered, which is the second call to
     *    this function. The first call is simply 'undefined', which is why we check for that and ignore it.
     * 2) Check and see if the filters for this object are even part of the template. If not, just skip this step.
     * 3) If we find the filters in the session, then change this object's filters model to equal it and call the change
     *    detection manually to prevent Angular from throwing an ExpressionChangedAfterItHasBeenCheckedError error
     * @param fooTable the reference to the foo table template
     */
    @ViewChild('fooTable') set fooTable(fooTable: any) {
        if(fooTable != undefined) {
            let filters = fooTable.filters['status'];
            if (filters != undefined && filters.value != undefined) {
                this.statusFilter = filters.value;
            }
            this.cd.detectChanges();
        }
    }
}

foo.component.html: 

<ng-container *ngIf="showFooTable">
    <div id="filters">
        <p-checkbox [(ngModel)]="statusFilter" value="up"      (onChange)="fooTable.filter(statusFilter, 'status', 'in')"></p-checkbox> Up
        <p-checkbox [(ngModel)]="statusFilter" value="down"    (onChange)="fooTable.filter(statusFilter, 'status', 'in')"></p-checkbox> Down
        <p-checkbox [(ngModel)]="statusFilter" value="unknown" (onChange)="fooTable.filter(statusFilter, 'status', 'in')"></p-checkbox> Unknown
    </div>

    <p-table #fooTable
             stateStorage="session"
             stateKey="foo-table-state">
    </p-table>
</ng-container>
...