Angular ag-grid实现回车键触发过滤，禁用实时自动过滤

1. 关闭自动实时过滤 #

在列定义的filterParams中配置debounceMs: 0，阻止过滤器根据输入内容自动实时更新结果：

columnDefs = [
  {
    field: 'productName',
    filter: 'agTextColumnFilter',
    floatingFilter: true,
    filterParams: {
      debounceMs: 0, // 禁用自动防抖触发过滤
      applyButton: true // 可选：显示"应用"按钮，可与回车触发共存
    }
  }
];

2. 绑定回车键触发过滤 #

通过网格的gridReady事件获取实例，给所有浮动过滤器的输入框绑定回车事件，手动触发过滤操作：

private gridApi!: GridApi;

onGridReady(params: GridReadyEvent) {
  this.gridApi = params.api;

  // 等待DOM渲染完成后获取输入框元素
  setTimeout(() => {
    const filterInputs = document.querySelectorAll('.ag-floating-filter-input');
    filterInputs.forEach(input => {
      input.addEventListener('keydown', (e: KeyboardEvent) => {
        if (e.key === 'Enter') {
          // 获取当前输入框对应的列
          const colIndex = input.getAttribute('aria-colindex');
          if (!colIndex) return;
          
          const column = this.gridApi.getColumn(colIndex);
          const filterInstance = this.gridApi.getFilterInstance(column);
          
          // 应用过滤模型并通知网格更新结果
          filterInstance?.applyModel();
          this.gridApi.onFilterChanged();
        }
      });
    });
  }, 0);
}

自定义浮动过滤器的处理方式 #

如果使用了自定义浮动过滤器组件，直接在组件内部监听输入框的回车事件即可：

// 自定义浮动过滤器组件示例
export class CustomFloatingFilterComponent implements IFloatingFilter {
  private params!: IFloatingFilterParams;
  filterText = '';

  agInit(params: IFloatingFilterParams): void {
    this.params = params;
  }

  onInputKeydown(e: KeyboardEvent) {
    if (e.key === 'Enter') {
      this.params.parentFilterInstance(filterInstance => {
        filterInstance.setModel({ filter: this.filterText });
        filterInstance.applyModel();
      });
      this.params.api.onFilterChanged();
    }
  }
}

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