primeng p-datatable значение заголовка фильтра сохранения - PullRequest
Новая
       15

primeng p-datatable значение заголовка фильтра сохранения

0 голосов
/ 27 января 2019

Я использую PrimeNg DataTable в приложении Angular.

Я хочу сохранить фильтры и при возврате в компонент восстановить фильтры и отобразить значение фильтров в заголовках столбцов.

На самом деле я пытаюсь это сделать, но это не работает: 

@ViewChild(DataTable) candTable: DataTable;
storeFilters(event: any) {
  this._candidatureService.storeFilters(event.filters);
}

restoreFilters(){
  let filtersStored = this._candidatureService.restoreFilters();
  if(filtersStored){
    this.candTable.filters = filtersStored;
  }
}

Я использую primeng@4.2.2 и angular@4.3.3.

1 Ответ

0 голосов
/ 28 января 2019

Логика здесь заключается в том, что вы должны сохранить свой фильтр в sessionStorage или вы также можете сохранить его в localStorage.Это зависит от ваших требований.

  1. Когда вы загрузите компонент, мы проверим, есть ли какой-либо объект табличного события, сохраненный в сеансе, или нет ngOnInit ().

  2. Если это так, см. Логику в методе loadDataLazily ().

Всякий раз, когда вы вносите какие-либо изменения в фильтры, таблица Primeng вызывает событие таблицы Object.Здесь вы можете найти все детали порядка сортировки строк фильтра и т. Д.

Я взял две вещи: одно текстовое поле, а другое - раскрывающийся список для фильтра.Единственное, что нам нужно сделать дополнительно, чтобы отобразить фильтры в текстовом поле и в окне выбора, - это взять две переменные.Который мы свяжем с ngModel.Если у вас есть 10 столбцов с фильтром, вам придется взять 10 переменных или, может быть, вы можете создать объект. 

<p-table #dt [columns]="selectedColumns" 
    [value]="data"
    [lazy]="true"
    (onLazyLoad)="loadDataLazily($event)"
    [paginator]="true"
    [rows]="10"
    [totalRecords]="totalRecords"
    [filterDelay]="500">
    <ng-template pTemplate="header">
        <tr>
            <th *ngFor="let col of selectedColumns" [ngSwitch]="col.field">
               {{col.header}}
            </th>
        </tr>
        <tr>
            <th *ngFor="let col of selectedColumns" [ngSwitch]="col.field">
                <input *ngSwitchCase="'NAME'" 
                type="text"
                [(ngModel)]="name" 
                (input)="dt.filter($event.target.value, 'NAME')" 
                [value]="dt.filters['NAME']?.value">

                <p-dropdown *ngSwitchCase="'USER'"
                    [options]="users" 
                    [style]="{'width':'100%'}"
                    [(ngModel)]="user"
                    (onChange)="dt.filter($event.value, 'USER', 'equals')">
                </p-dropdown>
            </th>                    
        </tr>
     </ng-template>
    <ng-template pTemplate="body" let-i="rowIndex" let-suite>
     ....                            
    </ng-template>
</p-table>
// This is how you can reset filter.
<button class="btn btn-default btn-sm" (click)="resetTable(dt)">
 <i class="fa fa-undo"></i>&nbsp;Reset Filter</button>

public user;
public name
public cachedTableEvent:any;
ngOnInit() {
    this.cachedTableEvent = JSON.parse(sessionStorage.getItem("filter"));
}
loadDataLazily(e: any) {
    sessionStorage.setItem("filter",JSON.stringify(e));
    if(this.cachedTableEvent){
        e = this.cachedTableEvent;
        for (var key in this.cachedTableEvent['filters']) {
          if (this.cachedTableEvent['filters'].hasOwnProperty(key)) {
             switch(key){
                  case "USER":
                        this.user = this.cachedTableEvent['filters'][key].value;
                  case "NAME":
                        this.name = this.cachedTableEvent['filters'][key].value;
             }
          }
       }
      this.cachedTableEvent = null;
    }
    fetchRecordFromBackend(e);
  }
resetTable(e: any) {
    this.name = null;
    this.user = null;
    e.reset();
  }

Этот код отлично работает для меня.Может ли это помочь вам.

...