Question

我正在Angular应用上使用PrimeNg DataTable。

我要保存过滤器，并在返回组件时还原过滤器并在col标题上显示过滤器值。

实际上，我正在尝试此操作，但这不起作用：

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

Answer 1

这里的逻辑是您必须将过滤器保存在sessionStorage中，或者也可以将其保存在localStorage中。这取决于您的要求。

当您加载组件时，我们将检查是否有任何表事件对象保存在会话中还是看不到ngOnInit（）。
如果有，请参见loadDataLazily（）方法中的逻辑。

无论何时在过滤器中进行任何更改，Primeng表都会触发表事件对象。您可以在其中找到“筛选器”行排序顺序等的所有详细信息。

我在这里做了两件事，一个是文本框，另一是下拉菜单。为了在文本框和选择框中显示过滤器，我们唯一需要做的事情就是，我们必须接受两个变量。我们将与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();
  }

此代码非常适合我。可能对您有帮助。

primeng p-datatable保存过滤器标头值

1 个答案: