如何刷新ag-grid数据表？api.refreshCells等方法失效问题求助

阿华AIGC实验室

2026-5-13

解决AG-Grid点击按钮后无法刷新数据的问题

我一眼就看出问题出在哪了！你现在的写法是直接修改gridOptions.rowData和全局data变量，但AG-Grid根本不会监听这个属性的变化——它只会在初始化或者调用**setRowData()方法时才会重新加载整个数据集。你之前尝试的refreshCells()和redrawRows()都是用来更新现有行内的单元格数据**的，不是用来替换整个数据集的，所以自然没效果。

修复后的核心代码（修改`changeData`函数）

function changeData() {
  // 生成新数据
  const newData = [
    { 'a' : 9, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
    { 'a' : 9, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
    { 'a' : 9, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
    { 'a' : 9, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
    { 'a' : 9, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
    { 'a' : 9, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
  ];
  console.log(newData);
  // 关键：调用AG-Grid官方API设置新数据，触发表格自动刷新
  gridOptions.api.setRowData(newData);
  // 可选：如果需要让列自适应宽度，加上这句
  gridOptions.api.sizeColumnsToFit();
}

为什么这样有效？

setRowData()是AG-Grid官方提供的替换整个数据集的标准方法，调用它会让表格重新渲染所有行，自动处理数据更新的全流程。
你之前直接修改gridOptions.rowData只是改变了一个JS对象的属性，但AG-Grid内部并没有监听这个属性的变化，所以表格完全不知道数据已经更新了。