如何在AG Grid中动态更新overlayNoRowsTemplate？

当然可以动态修改！这在处理错误状态、不同空数据场景时特别实用，我给你分享两种常用且靠谱的实现方式：

1. 用React状态直接动态控制文本模板 #

最直接的方式就是借助React的状态管理，把overlayNoRowsTemplate绑定到一个状态变量上，当需要更新时（比如接口请求出错），直接修改状态即可触发AG Grid更新覆盖层内容。

示例代码：

import { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

function MyGrid() {
  // 初始化默认模板内容
  const [noRowsTemplate, setNoRowsTemplate] = useState('暂无数据可展示');

  // 模拟接口请求错误的场景
  const fetchData = async () => {
    try {
      // 假设这里是你的数据请求逻辑
      const response = await fetch('/api/data');
      const data = await response.json();
      // 请求成功后重置模板
      setNoRowsTemplate('暂无数据可展示');
      // 更新表格数据...
    } catch (error) {
      // 请求失败时更新错误提示模板
      setNoRowsTemplate(`无法连接到服务器。因错误${error.code}导致无数据行可展示`);
    }
  };

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        // 动态绑定模板
        overlayNoRowsTemplate={noRowsTemplate}
        // 其他配置项...
      />
      <button onClick={fetchData}>获取数据</button>
    </div>
  );
}

export default MyGrid;

2. 动态生成复杂JSX模板（带样式/交互） #

如果需要展示更复杂的覆盖层（比如带重试按钮、自定义样式），可以把JSX转换成字符串后传入overlayNoRowsTemplate。这里可以用ReactDOMServer.renderToString来实现：

示例代码：

import { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import { renderToString } from 'react-dom/server';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

function MyGrid() {
  const [noRowsTemplate, setNoRowsTemplate] = useState(renderToString(
    <div style={{ padding: '20px', textAlign: 'center', color: '#666' }}>
      暂无数据可展示
    </div>
  ));

  const handleRetry = () => {
    // 重试请求逻辑
    fetchData();
  };

  const fetchData = async () => {
    try {
      // 数据请求逻辑...
      setNoRowsTemplate(renderToString(
        <div style={{ padding: '20px', textAlign: 'center', color: '#666' }}>
          暂无数据可展示
        </div>
      ));
    } catch (error) {
      // 生成带重试按钮的错误模板
      const errorTemplate = renderToString(
        <div style={{ padding: '30px', textAlign: 'center' }}>
          <p style={{ color: '#e74c3c', marginBottom: '15px' }}>
            无法连接到服务器。因错误{error.code}导致无数据行可展示
          </p>
          <button 
            onClick={handleRetry}
            style={{ padding: '8px 16px', backgroundColor: '#3498db', color: 'white', border: 'none', borderRadius: '4px' }}
          >
            重试加载
          </button>
        </div>
      );
      setNoRowsTemplate(errorTemplate);
    }
  };

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        overlayNoRowsTemplate={noRowsTemplate}
        // 其他配置项...
      />
      <button onClick={fetchData}>获取数据</button>
    </div>
  );
}

export default MyGrid;

注意事项 #

• 只要overlayNoRowsTemplate的props值发生变化，AG Grid就会自动重新渲染无行覆盖层，不需要额外手动触发刷新
• 如果是使用类组件，逻辑类似，只是把useState换成this.state和this.setState即可

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