如何在AG Grid（JavaScript版）中订阅筛选变更事件并实时显示筛选行数

嘿，这个需求太实用了！在AG Grid的JavaScript版本里，你可以通过监听filterChanged事件来实时捕获筛选变更，然后轻松获取并更新筛选后的行数。下面是具体的实现步骤和代码示例：

方法一：初始化Grid时直接配置事件回调 #

这是最直接的方式，在gridOptions里定义onFilterChanged回调函数即可：

// 初始化AG Grid的核心配置
const gridOptions = {
  // 你的列定义和基础配置
  columnDefs: [
    { field: 'name', filter: true },
    { field: 'age', filter: 'agNumberColumnFilter' },
    // 其他列配置...
  ],
  rowData: [/* 你的数据源 */],
  
  // 监听筛选变更事件
  onFilterChanged: (params) => {
    // 获取筛选后实际显示的行数
    const displayedRowCount = params.api.getDisplayedRowCount();
    // 更新页面上的行数显示（比如把结果插入到指定DOM元素）
    document.getElementById('filtered-row-count').textContent = `筛选后行数：${displayedRowCount}`;
  },
  
  // 可选：页面加载时先显示初始总行数
  onGridReady: (params) => {
    const initialRowCount = params.api.getDisplayedRowCount();
    document.getElementById('filtered-row-count').textContent = `筛选后行数：${initialRowCount}`;
  }
};

// 将Grid挂载到指定DOM节点
new agGrid.Grid(document.getElementById('myGrid'), gridOptions);

方法二：Grid初始化后动态添加事件监听 #

如果是在Grid已经渲染完成后才需要添加监听，可以用Grid API的addEventListener方法：

// 假设你已经拿到了Grid的api实例（比如从gridOptions或onGridReady回调中获取）
const gridApi = gridOptions.api;

// 动态绑定筛选变更监听
gridApi.addEventListener('filterChanged', (params) => {
  const displayedRowCount = params.api.getDisplayedRowCount();
  console.log(`当前筛选后可见行数：${displayedRowCount}`);
  // 这里根据需求更新你的UI展示
});

关键细节说明 #

• filterChanged事件会在所有筛选操作触发时执行，包括列头筛选、快速筛选（Quick Filter）、通过API手动设置过滤器等场景，完全覆盖实时监听的需求。
• getDisplayedRowCount()方法返回的是当前所有可见行的数量，自动排除了被筛选掉、分页隐藏或分组折叠的行，正好是你需要的筛选后行数。
• 如果需要更细致的区分触发源，可以在回调的params参数里查看更多上下文信息，但大部分场景下直接获取行数就足够了。

搭配简单的HTML结构就能完整运行：

<div id="myGrid" style="height: 500px; width: 100%;" class="ag-theme-alpine"></div>
<div id="filtered-row-count" style="margin-top: 10px; font-weight: bold;"></div>

这样用户操作筛选时，页面上的行数就会实时更新啦！

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