Question

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

在我的代码中，我在列中有过滤：名称，但我也想为代码添加过滤器。

  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运算。

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

1 个答案: