AG-Grid 大数据量场景下的筛选优化实践

问题背景

在使用AG-Grid处理大规模数据集(超过10万行)时，开发者通常会选择服务器端行模型(SSRM)来提高性能。在这种场景下，筛选功能也需要从后端获取数据。当用户尝试选择大量筛选值(如超过1000个)时，会导致服务器请求过大，甚至可能使服务崩溃。

解决方案探索

初始方案：禁用应用按钮

开发者首先尝试通过监听筛选修改事件来控制"应用"按钮的可用性：

onFilterModified(params) {
    const totalValues = params.filterInstance.valueModel.availableKeys.size;
    const selectedCount = params.filterInstance.valueModel.selectedKeys.size;

    const isInvalid = selectedCount !== totalValues && selectedCount > MAX_FILTER_SELECTION;

    if (isInvalid || selectedCount === 0) {
      this.disableApplyFilterButton(isInvalid);
    }
}

这种方法虽然可以禁用按钮，但存在一个明显缺陷：用户仍然可以通过按Enter键提交筛选请求，无法完全阻止大请求的发送。

替代方案：自定义筛选行为

开发者随后尝试移除excelMode，自定义筛选参数：

{
    field: 'manufacturer',
    filter: true,
    filterParams: {
        buttons: ['apply', 'cancel'],
        closeOnApply: true,
        values: this.getFilterData.bind(this),
    },
}

但这种方案引入了新的问题：在迷你筛选输入框中输入内容后点击"应用"按钮时，弹窗会关闭但请求不会触发，只有按Enter键才有效。

最终解决方案

经过多次尝试，开发者最终回归使用Windows excelMode，并采用请求拦截的方式处理大筛选请求：

1. 允许用户进行任何筛选操作
2. 在请求发送前检查筛选值的数量
3. 如果超过限制，则取消当前筛选操作并返回现有数据
4. 同时清除违规的筛选条件

虽然这不是最理想的解决方案，但在当前场景下能够有效防止服务器过载。

技术思考

在处理大规模数据集时，前端性能优化需要特别考虑以下几点：

1. 用户体验与性能的平衡：限制筛选数量是必要的，但要提供清晰的反馈
2. 键盘交互的全面考虑：不能只关注UI元素状态，还需考虑键盘快捷键
3. 优雅降级策略：当用户操作可能影响性能时，要有合理的回退机制

这种解决方案展示了在实际项目中，当理想方案不可行时，如何通过折中方法达到业务目标的技术决策过程。