AngularSlickgrid多列过滤
- 首先，在需要添加过滤器的列中增加filterable: true选项。例如：
{ id: 'title', name: 'Title', field: 'title', filterable: true, width: 220 }
- 在grid-options中添加enableFiltering: true选项。
const gridOptions: GridOption = { enableFiltering: true, // ... }
- 在组件中定义过滤器选项，包括列ID、过滤器类型、传递给过滤器的参数等。
const filterOptions = [ { columnId: 'title', type: FieldType.string, filter: MyCustomTitleFilter }, { columnId: 'duration', type: FieldType.number, filter: MyCustomDurationFilter }, // ... ];
- 创建自定义的过滤器组件。例如：
@Component({
selector: 'app-title-filter',
template: ,
})
export class MyCustomTitleFilter implements Filter {
private grid: any;
private searchText = '';
init(args: any): void { this.grid = args.grid; }
destroy(): void { }
isTriggeredBy(column: Column): boolean { return column.id === 'title'; }
getArguments(): any { return { searchText: this.searchText }; }
onChange(event: any): void { // filter the grid } }
- 在grid对象上调用setFilter方法，传递过滤器选项参数。
this.grid.setFilter(filterOptions);
- 在onChange方法中，实现过滤器的逻辑。例如：
onChange(event: any): void { const searchString = event; const columnFilters = [];
if (searchString) { columnFilters.push({ columnId: 'title', operator: OperatorType.contains, searchTerms: [searchString] }); }
this.grid.setFilter(columnFilters); }
- 可以使用多个过滤器来实现多列过滤。修改filterOptions数组和onChange方法即可。
参考