Angular 14中Kendo UI Pivot Grid筛选功能实现求助

算力阿峰

2026-8-1

为Angular 14 Kendo UI Pivot Grid添加筛选功能

1. 核心实现步骤

要启用Pivot Grid的筛选功能，需要配合筛选组件和维度配置，具体如下：

在Pivot Grid模板内添加<kendo-pivotgrid-filter>子组件，绑定筛选数据与变更事件
在维度配置中开启对应维度的筛选支持
组件类中维护筛选状态并处理筛选变更

2. 修改后的模板代码

<kendo-pivotgrid 
  [kendoPivotLocalBinding]="timingTableData" 
  [dimensions]="dimensions" 
  [measures]="measures"
  [rowAxes]="rows" 
  [columnAxes]="columns" 
  [measureAxes]="defaultMeasureAxes">
  <!-- 新增筛选组件，遍历渲染所有筛选项 -->
  <kendo-pivotgrid-filter 
    *ngFor="let filter of filters"
    [filter]="filter"
    (filterChange)="onFilterChange($event)">
  </kendo-pivotgrid-filter>
</kendo-pivotgrid>

3. 组件类配置代码

import { Component } from '@angular/core';
import { PivotGridFilter } from '@progress/kendo-angular-pivotgrid';

@Component({
  // 你的组件元数据（如selector、templateUrl等）
})
export class YourComponent {
  // 维度配置：给需要筛选的维度添加filterable: true
  public dimensions = [
    { name: '你的维度名', caption: '维度显示名称', filterable: true },
    // 其他维度配置...
  ];

  // 存储当前筛选状态的数组
  public filters: PivotGridFilter[] = [];

  // 处理筛选变更事件，更新筛选数组
  public onFilterChange(filter: PivotGridFilter): void {
    const targetIndex = this.filters.findIndex(f => f.dimension === filter.dimension);
    if (targetIndex !== -1) {
      this.filters[targetIndex] = filter;
    } else {
      this.filters.push(filter);
    }
  }

  // 你的现有数据：timingTableData、measures、rows、columns等
}