多标签场景下，如何不渲染Ag-grid就计算过滤后行数？

完全可以通过创建不渲染DOM的Ag-Grid实例来实现需求，这种方式不会把网格挂载到页面上，但依然能执行数据过滤、计算显示行数等核心逻辑，性能比渲染DOM网格更优。

核心思路 #

利用Ag-Grid的suppressRendering配置项，创建仅处理数据逻辑的"虚拟网格"：

• 为虚拟网格创建一个不会挂载到页面的虚拟DOM节点
• 开启suppressRendering: true，禁用UI渲染
• 传入目标数据、列定义和过滤器配置，让网格完成数据处理
• 通过网格API直接获取过滤后的行数

代码示例 #

// 为未激活标签页创建虚拟网格实例
function initVirtualGrid(tabId, rowData, columnDefs, initialFilterModel = {}) {
  // 创建一个不会挂载到页面的虚拟DOM节点
  const virtualContainer = document.createElement('div');

  const gridOptions = {
    rowData,
    columnDefs,
    filterModel: initialFilterModel,
    enableFilter: true,
    suppressRendering: true, // 关键：禁用UI渲染
    onGridReady: (params) => {
      // 获取过滤后的行数并更新标签显示
      const displayedRowCount = params.api.getDisplayedRowCount();
      document.getElementById(`tab-${tabId}-count`).textContent = `(${displayedRowCount} 行)`;
    },
    onFilterChanged: (params) => {
      // 过滤器变化时实时更新行数
      const displayedRowCount = params.api.getDisplayedRowCount();
      document.getElementById(`tab-${tabId}-count`).textContent = `(${displayedRowCount} 行)`;
    }
  };

  // 创建网格实例并返回，方便后续销毁或同步状态
  const virtualGrid = agGrid.createGrid(virtualContainer, gridOptions);
  return virtualGrid;
}

// 切换到激活标签时的处理逻辑
function activateTab(tabData) {
  // 如果有虚拟网格实例，先保存过滤器状态并销毁
  if (tabData.virtualGrid) {
    tabData.savedFilterModel = tabData.virtualGrid.api.getFilterModel();
    tabData.virtualGrid.destroy();
  }

  // 创建真实挂载到DOM的网格
  const realContainer = document.getElementById('active-grid-container');
  agGrid.createGrid(realContainer, {
    rowData: tabData.rowData,
    columnDefs: tabData.columnDefs,
    filterModel: tabData.savedFilterModel || {},
    enableFilter: true
  });
}

注意事项 #

• 内存管理：当标签页被关闭或不再需要时，一定要调用virtualGrid.destroy()销毁虚拟实例，避免内存泄漏。
• 状态同步：如果用户在激活的网格中修改了过滤器，切换标签时要把filterModel同步到对应标签的虚拟网格，保证行数计算准确。
• 配置复用：多个标签页的columnDefs可以复用同一配置对象，减少重复创建的开销。

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