AGGrid React：滚动时锁定行位置并保持更新的实现方案

针对实时新增行挤走当前查看行的问题，以下几种方案既能保持网格持续更新，又能锁定用户关注的滚动位置：

方案一：滚动位置动态补偿（最通用） #

核心思路是在数据更新前后记录当前可视区域的关键位置，更新后通过AGGrid的API调整滚动偏移，抵消新行插入带来的位移，适合大多数新行插入顶部的场景。

实现步骤（React中） #

1. 引用AGGrid实例以调用API：

import { AgGridReact } from 'ag-grid-react';
import { useRef } from 'react';

const MyGrid = () => {
  const gridRef = useRef(null);
  
  return (
    <AgGridReact
      ref={gridRef}
      rowData={[]}
      columnDefs={[]} // 替换为你的列配置
    />
  );
};

2. 处理服务器推送更新时添加滚动补偿逻辑：

const handleServerUpdate = (newRows) => {
  const api = gridRef.current?.api;
  if (!api) return;

  // 获取当前可视区域的第一行索引
  const visibleRange = api.getVerticalPixelRange();
  const firstVisibleRowIndex = api.getRowIndexAtPixel(visibleRange.top);

  // 用户不在网格顶部时，执行滚动补偿
  if (firstVisibleRowIndex > 0) {
    const currentScrollPos = api.getVerticalScrollPosition();
    const addedRowCount = newRows.length;
    
    // 更新数据
    const existingRows = api.getRowData();
    api.setRowData([...newRows, ...existingRows]);

    // 补偿滚动位置（行高固定时）
    const rowHeight = api.getRowHeight();
    api.setVerticalScrollPosition(currentScrollPos + addedRowCount * rowHeight);
  } else {
    // 用户在顶部，直接更新数据
    const existingRows = api.getRowData();
    api.setRowData([...newRows, ...existingRows]);
  }
};

适配行高不固定场景 #

如果行高动态计算，可通过行节点定位：

const handleServerUpdate = (newRows) => {
  const api = gridRef.current?.api;
  if (!api) return;

  const visibleRange = api.getVerticalPixelRange();
  const firstVisibleRowIndex = api.getRowIndexAtPixel(visibleRange.top);

  if (firstVisibleRowIndex > 0) {
    // 记录目标行的唯一ID（假设每行有`id`字段）
    const targetRowNode = api.getRowNode(firstVisibleRowIndex);
    const targetRowId = targetRowNode.data.id;
    
    // 更新数据
    const existingRows = api.getRowData();
    api.setRowData([...newRows, ...existingRows]);

    // 调整滚动位置，让原目标行保持在可视区域
    const updatedTargetNode = api.getRowNode(targetRowId);
    if (updatedTargetNode) {
      const requiredScrollPos = updatedTargetNode.rowTop - visibleRange.top + api.getVerticalScrollPosition();
      api.setVerticalScrollPosition(requiredScrollPos);
    }
  } else {
    const existingRows = api.getRowData();
    api.setRowData([...newRows, ...existingRows]);
  }
};

方案二：锁定指定行（用户主动选择） #

如果用户需要聚焦某一行分析，可提供“锁定行”功能，每次更新后自动将该行保持在可视区域。

实现思路 #

1. 绑定行点击事件，让用户选择锁定行：

import { useState } from 'react';

const [lockedRowId, setLockedRowId] = useState(null);

<AgGridReact
  onRowClicked={(params) => setLockedRowId(params.data.id)}
  // 其他配置
/>

2. 更新数据后确保锁定行可见：

const handleServerUpdate = (newRows) => {
  const api = gridRef.current?.api;
  if (!api) return;

  // 更新数据
  const existingRows = api.getRowData();
  api.setRowData([...newRows, ...existingRows]);

  // 锁定行存在时，确保其在可视区域
  if (lockedRowId) {
    const lockedNode = api.getRowNode(lockedRowId);
    if (lockedNode) {
      api.ensureNodeVisible(lockedNode, { position: 'middle' }); // 可选：top/middle/bottom
    }
  }
};

方案三：使用无限滚动模式（适合大数据量） #

若数据量较大，可切换rowModelType='infinite'，结合后端分页缓存策略，新行插入不会影响当前可视区域的滚动位置。

核心配置 #

<AgGridReact
  rowModelType="infinite"
  cacheBlockSize={100} // 每次加载行数
  maxBlocksInCache={5} // 缓存块数量
  datasource={{
    getRows: (params) => {
      // 调用后端接口加载指定范围数据
      // 实时更新时调用api.refreshInfiniteCache()触发重新加载
    }
  }}
  // 其他配置
/>

这种模式下AGGrid仅加载可视区域附近的数据，新行插入顶部只会更新缓存，不会挤走当前查看的行。

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