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

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 中。这取决于您的要求。

1. 当您加载组件时，我们将检查是否有任何表格事件对象 保存在会话中或看不到 ngOnInit()。

2. 如果存在，请查看 loadDataLazily() 方法中的逻辑。

每当您在过滤器中进行任何更改时，Primen 表都会触发一个表事件对象。您可以在其中找到过滤器行排序顺序等的所有详细信息。

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

这段代码非常适合我。能不能帮到你。