Ag-grid数据加载后状态保存与恢复的技术疑问

问题描述 #

我正在使用AG Grid加载数据，希望在数据加载完成后保存AG Grid的状态，并在后续使用时恢复。查阅文档后得知需使用columnApi保存状态，现在有两个疑问：

1. 恢复状态的同时加载数据需要做出哪些修改？
2. 除设置单独按钮外，应在何处调用恢复状态的方法？

提供的代码示例：

var gridOptions = { 
  columnDefs: columnDefs, 
  enableSorting: true, 
  enableFilter: true, 
  onGridReady: function () { 
    gridOptions.columnApi.setColumnState(colState); 
  }, 
}; 

1. 恢复状态同时加载数据的关键修改 #

直接在onGridReady里调用setColumnState容易和数据加载、列初始化的时序冲突，需要从以下几个方面调整：

• 优先使用applyColumnState替代setColumnState
setColumnState要求保存的状态和当前列定义完全匹配，否则会报错。而applyColumnState支持灵活的匹配策略，能兼容列定义变更的场景（比如新增/删除列）：

  gridOptions.columnApi.applyColumnState({
    state: colState,
    applyOrder: true, // 仅应用列顺序，忽略不存在的列
    defaultState: { width: 150 } // 给新列设置默认宽度
  });
  

• 等待数据加载完成后再恢复状态
  如果数据是异步加载的，onGridReady触发时数据还未就绪，此时恢复排序/过滤状态不会生效。应该在setRowData完成后再调用状态恢复方法：

  // 异步加载数据示例
  fetch('/your-data-api')
    .then(res => res.json())
    .then(data => {
      gridOptions.api.setRowData(data);
      // 数据加载完成后恢复列状态
      gridOptions.columnApi.applyColumnState({ state: colState });
    });
  

• 服务器端场景的特殊处理
  如果你的AG Grid用了服务器端分页/排序/过滤，不能直接在前端恢复状态，需要先从保存的状态中提取排序、过滤参数，传给后端获取对应的数据，再恢复列的其他状态（宽度、顺序、可见性）：

  // 从保存的状态中提取排序和过滤参数
  const sortModel = colState
    .map(col => ({ colId: col.colId, sort: col.sort }))
    .filter(item => item.sort);
  
  const filterModel = colState.reduce((acc, col) => {
    if (col.filter) acc[col.colId] = col.filter;
    return acc;
  }, {});
  
  // 带着参数请求后端数据
  fetch(`/api/data?sort=${JSON.stringify(sortModel)}&filter=${JSON.stringify(filterModel)}`)
    .then(res => res.json())
    .then(data => {
      gridOptions.api.setRowData(data);
      // 恢复列的宽度、顺序等状态
      gridOptions.columnApi.applyColumnState({ state: colState });
    });
  

2. 除单独按钮外的状态恢复时机 #

除了手动触发的按钮，这些场景非常适合自动调用状态恢复方法：

• Grid初始化 + 数据加载完成后
  这是最常见的场景，确保数据和状态同步生效。如果是框架集成（React/Vue），可以监听数据变化的钩子：

  // React示例：监听rowData加载完成
  useEffect(() => {
    if (rowData.length > 0 && columnApi) {
      columnApi.applyColumnState({ state: savedColState });
    }
  }, [rowData, columnApi]);
  

• 页面刷新或路由返回后
  用户刷新页面或从其他页面返回时，在页面挂载完成后，先加载数据再恢复状态，还原用户之前的操作场景。

• 列定义动态更新后
  如果列定义会根据权限、业务场景动态变化，在AG Grid触发columnChanged事件后恢复状态，确保新列应用之前的配置：

  gridOptions.columnApi.addEventListener('columnChanged', () => {
    gridOptions.columnApi.applyColumnState({ state: colState });
  });
  

• 用户身份切换后
  不同用户可能有个性化的Grid状态配置，在用户登录/切换账号完成后，加载对应用户保存的状态并恢复。

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