如何在填充数据集前确定ag-grid可显示行数及监听尺寸变化

我之前在做ag-grid开发时也碰到过一模一样的问题——没加载数据时getDisplayedRowCount()确实会返回0，因为这个方法统计的是当前实际渲染在视图里的已有数据行数，空网格自然拿不到有效数值。下面分享我实际用过的解决方案：

一、填充数据前计算可显示行数 #

核心思路是通过网格容器的可视尺寸和行高来估算，步骤很清晰：

• 1. 拿到网格容器的可视高度，记得要扣除表头的高度（如果你的网格带表头的话）
• 2. 确定行高：如果是固定行高，直接用你配置的rowHeight值；如果是自适应行高，可以先取ag-grid默认的25px做估算，后续数据加载后再修正
• 3. 用(容器可视高度 - 表头高度) / 行高，取整数部分就是可显示的行数

给你个实际代码示例：

// 获取网格容器DOM
const gridContainer = document.querySelector('#myAgGrid');
// 拿到表头高度（没有表头就设为0）
const headerHeight = gridContainer.querySelector('.ag-header')?.clientHeight || 0;
// 计算网格主体的可视高度
const bodyViewportHeight = gridContainer.clientHeight - headerHeight;
// 固定行高的情况，替换成你自己配置的数值
const fixedRowHeight = 28;
// 计算可显示行数
const visibleRowCount = Math.floor(bodyViewportHeight / fixedRowHeight);
console.log('当前可显示行数:', visibleRowCount);

二、追踪网格尺寸变化时的可显示行数 #

有两种靠谱的方式可以监听尺寸变化，按需选就行：

方式一：用ag-grid内置的sizeChanged事件 #

这是最贴合ag-grid的方案，网格容器尺寸变化时会自动触发：

const gridOptions = {
  // 你的其他网格配置...
  onSizeChanged: function(params) {
    // 从网格API里直接拿表头和主体视图的高度
    const headerHeight = params.api.gridPanel.headerRoot.clientHeight;
    const bodyViewportHeight = params.api.gridPanel.bodyViewport.clientHeight;
    // 这里如果是自适应行高，可以用params.api.getRowHeight()动态获取
    const rowHeight = 28;
    const updatedVisibleRowCount = Math.floor(bodyViewportHeight / rowHeight);
    console.log('尺寸更新后可显示行数:', updatedVisibleRowCount);
    // 把这个值存到你需要的地方就行
  }
};

方式二：用浏览器原生的ResizeObserver #

如果你需要更灵活的监听（比如同时监听多个容器），可以用这个API：

const gridContainer = document.querySelector('#myAgGrid');
const resizeObserver = new ResizeObserver(entries => {
  entries.forEach(entry => {
    const headerHeight = gridContainer.querySelector('.ag-header')?.clientHeight || 0;
    const bodyViewportHeight = entry.contentRect.height - headerHeight;
    const rowHeight = 28;
    const updatedVisibleRowCount = Math.floor(bodyViewportHeight / rowHeight);
    console.log('容器尺寸变化，可显示行数:', updatedVisibleRowCount);
  });
});
// 开始监听
resizeObserver.observe(gridContainer);

// 记得在组件销毁时取消监听，避免内存泄漏
// resizeObserver.unobserve(gridContainer);

三、一些注意点 #

• 如果是自适应行高（开启了autoHeight: true），计算出来的行数只是估算值，等数据加载完成后，可以再用getDisplayedRowCount()拿到准确的实际渲染行数
• 一定要确保网格容器已经渲染完成再执行计算，比如在React的useEffect、Vue的mounted钩子中调用，不然会拿到0高度的无效结果

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