如何为SSRM自定义错误提示信息与空数据提示信息

SSRM模式下NoRowsOverlay默认不生效是框架设计逻辑导致的：内置无数据遮罩只会在服务端接口明确返回rowCount=0时自动触发，接口请求失败场景不会自动唤起该遮罩，官方文档里确实没有直接给出该场景下的自定义提示配置项，不需要硬找对应配置。

不需要用“请求失败也调用success回调塞错误行”的hack方案，合规实现方案如下：

• 自定义通用状态遮罩组件，同时覆盖无数据、请求错误两类提示场景，组件内部通过grid实例读取当前请求状态，渲染对应提示文案
• 接口请求失败时不要伪造成功回调，直接调用SSRM提供的params.fail()方法抛出错误状态，之后手动调用api.showNoRowsOverlay()唤起自定义遮罩即可
• 初始化grid时替换默认的无数据遮罩为你自定义的组件，同时把请求错误临时挂载到grid配置项上，供自定义遮罩组件读取判断渲染内容

参考实现代码：

// 自定义状态遮罩
class CustomStatusOverlay {
  init(params) {
    this.container = document.createElement('div');
    this.container.className = 'grid-custom-overlay';
    const customState = params.api.getGridOption('customState') || {};
    this.container.innerText = customState.loadError 
      ? '数据加载失败，请刷新重试' 
      : '暂无匹配数据';
  }
  getGui() {
    return this.container;
  }
}

// Grid配置
const gridOptions = {
  rowModelType: 'serverSide',
  components: {
    customStatusOverlay: CustomStatusOverlay
  },
  overlayNoRowsTemplate: 'customStatusOverlay',
  serverSideDatasource: {
    getRows(params) {
      fetchList(params.request)
        .then(res => {
          params.api.setGridOption('customState', { loadError: null });
          params.success({ rowData: res.data, rowCount: res.total });
        })
        .catch(err => {
          // 透传错误状态，不伪造成功返回
          params.fail();
          // 写入错误状态供遮罩组件读取
          params.api.setGridOption('customState', { loadError: err });
          // 唤起自定义遮罩
          params.api.showNoRowsOverlay();
        })
    }
  }
}

该实现完全符合AG Grid的官方API规范，不会破坏SSRM原有的分页、筛选、排序逻辑，后续版本升级也不会出现兼容问题。

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