Angular中使用kendoGridBinding获取Kendo Grid过滤后记录数

步骤1：导入数据处理工具函数 #

在组件文件中导入Kendo官方提供的数据处理工具process，用于基于过滤条件处理本地数据集：

import { process } from '@progress/kendo-data-query';

步骤2：定义记录数变量 #

在组件类中声明两个变量，分别存储总记录数和过滤后记录数：

export class YourComponent {
  data: any[] = /* 你的原始数据数组 */;
  totalRecords: number = this.data.length;
  filteredRecords: number = this.data.length;
  pagerSettings = { pageSizes: [5,10,25,100] }; // 你的分页配置

  // 后续逻辑方法写在这里
}

步骤3：监听Grid的过滤变化事件 #

修改Grid模板，添加filterChange事件监听，同时修正你代码中的拼写错误（[paeable]应为[pageable]）：

<p> Showing {{filteredRecords}} of {{totalRecords}} </p>
<kendo-grid
  [kendoGridBinding]="data"
  [pageSize]="20"
  [pageable]="pagerSettings"
  filterable="menu"
  (filterChange)="onFilterChange($event)">
</kendo-grid>

步骤4：实现过滤变化处理方法 #

在组件类中实现onFilterChange方法，通过process函数根据过滤条件计算过滤后的记录数：

onFilterChange(filter: any) {
  // 构造仅包含过滤条件的状态对象
  const state = {
    filter: filter
  };
  // 用process处理原始数据，得到过滤后的完整结果集
  const processedData = process(this.data, state);
  // 更新过滤后记录数
  this.filteredRecords = processedData.total;
}

补充说明 #

• 总记录数直接取原始数据数组的长度即可，不受过滤、分页操作影响。
• process函数会自动根据传入的过滤条件筛选数据，返回结果中的total字段即为过滤后的总记录数（不包含分页截断）。

内容的提问来源于stack exchange，提问作者Jason