如何在ng2-table中的多个列中进行过滤？

Question

我正在使用ng2-table:https://github.com/valor-software/ng2-table组件,但我需要为每列添加一个过滤器.

在我的代码中,我在列中有过滤:name但我也想为代码添加一个过滤器.

  public columns:Array<any> = [
    {title: 'Code', name: 'code',sort: 'asc'},
    {title: 'Name', name: 'name', sort: 'asc'}
  ];
  public page:number = 1;
  public itemsPerPage:number = 1;
  public maxSize:number = 5;
  public numPages:number = 1;
  public length:number = 0;
  public config:any = {
    paging: true,
    sorting: {columns: this.columns},
    filtering: {filterString: '', columnName:'name'}

  };

如何添加其他过滤器？

如果有人能给我一个例子,我真的很感激.

Answer 1

首先是为要过滤的字段创建配置.我将使用http://valor-software.com/ng2-table/中提供的示例作为基础.所以在你的component.ts中你会得到:

public config: any = {
    sorting: { columns: this.columns },
    filtering: {
      position: { filterString: '' },
      office: { filterString: '' }
    }
};

要过滤的每个列都将在filterString字段中存储指定的字符串.在columnName一个没有必要在这里,因为我硬编码.然后,在html中,创建输入,每个过滤器一个:

<input placeholder="Position"
       [ngTableFiltering]="config.filtering.position"
       (tableChanged)="onChangeTable(config)"/>
<input  placeholder="Office"
       [ngTableFiltering]="config.filtering.office"
       (tableChanged)="onChangeTable(config)"/>

<ng-table [config]="config.sorting"
              (tableChanged)="onChangeTable(config)"
              [rows]="rows" [columns]="columns">
</ng-table>

最后,数据的真实过滤器(再次在component.ts文件中):

public changeFilter(data: any, config: any): any {
    return data.filter((item: any) =>
      item["position"].match(this.config.filtering.position.filterString) &&
      item["office"].match(this.config.filtering.office.filterString));
}

请注意,我在这里使用AND逻辑进行过滤,您可能需要对它们进行OR运算.