AngularJS中ag-grid状态保存与恢复：避免重复点击加载数据

我明白你的需求啦——现在每次打开页面都得点按钮加载数据到ag-Grid里，想让页面刷新后直接恢复之前的表格状态和数据，不用再手动触发加载对吧？结合你给出的AngularJS + ag-Grid代码基础，我给你整理了一套落地的实现方案：

核心思路 #

我们要做两件事：

1. 缓存加载过的数据，避免重复请求数据库
2. 保存并恢复ag-Grid的状态（比如列宽、排序、过滤条件这些用户自定义的设置）

具体实现步骤 #

1. 数据持久化：用本地存储缓存数据 #

我们可以用localStorage（持久化，关闭浏览器也不会丢）或者sessionStorage（临时存储，关闭浏览器清空）来缓存从数据库拉取的数据。修改你的数据加载逻辑，优先读取缓存，没有缓存再请求接口：

$scope.loadData = function() {
  // 先检查本地缓存里有没有数据
  const cachedData = localStorage.getItem('agGridAthleteData');
  if (cachedData) {
    // 有缓存直接渲染到表格
    $scope.gridOptions.api.setRowData(JSON.parse(cachedData));
    // 同时恢复表格状态
    restoreGridState();
    return;
  }

  // 没有缓存再请求数据库
  $http.get('/your-api-endpoint')
    .then(function(response) {
      $scope.gridOptions.api.setRowData(response.data);
      // 把新数据存到缓存里
      localStorage.setItem('agGridAthleteData', JSON.stringify(response.data));
      // 保存当前表格的状态
      saveGridState();
    })
    .catch(err => console.error('数据加载失败:', err));
};

2. 保存与恢复ag-Grid状态 #

ag-Grid自带了一系列API来获取和设置表格状态，我们可以把这些状态也存在本地存储里，页面刷新后自动恢复：

// 保存表格状态（列宽、排序、过滤等）
function saveGridState() {
  const columnState = $scope.gridOptions.api.getColumnState();
  const filterModel = $scope.gridOptions.api.getFilterModel();
  const sortModel = $scope.gridOptions.api.getSortModel();
  
  const gridState = {
    columnState,
    filterModel,
    sortModel
  };
  
  localStorage.setItem('agGridState', JSON.stringify(gridState));
}

// 恢复表格状态
function restoreGridState() {
  const savedState = localStorage.getItem('agGridState');
  if (!savedState) return;
  
  const gridState = JSON.parse(savedState);
  $scope.gridOptions.api.setColumnState(gridState.columnState);
  $scope.gridOptions.api.setFilterModel(gridState.filterModel);
  $scope.gridOptions.api.setSortModel(gridState.sortModel);
}

3. 自动监听状态变化，实时保存 #

在ag-Grid的配置里添加事件监听，当用户调整列宽、排序、过滤时，自动触发状态保存：

$scope.gridOptions = {
  columnDefs: columnDefs,
  // 监听表格状态变化事件，实时保存
  onColumnResized: saveGridState,
  onColumnMoved: saveGridState,
  onFilterChanged: saveGridState,
  onSortChanged: saveGridState,
  // 其他原有配置...
};

4. 页面初始化时自动恢复 #

最后，在页面加载完成后，自动检查缓存并恢复数据和状态，彻底告别手动点击按钮：

// 页面就绪后自动执行
angular.element(document).ready(function() {
  const cachedData = localStorage.getItem('agGridAthleteData');
  if (cachedData) {
    // 有缓存直接恢复数据和状态
    $scope.gridOptions.api.setRowData(JSON.parse(cachedData));
    restoreGridState();
  } else {
    // 没有缓存的话，自动触发一次数据加载
    $scope.loadData();
  }
});

整合后的完整代码示例 #

把以上逻辑整合到你的原有代码里，最终控制器代码大概是这样：

agGrid.initialiseAgGridWithAngular1(angular);
var module = angular.module("example", ["agGrid"]);
module.controller("exampleCtrl", function($scope, $http) {
  var columnDefs = [
    {headerName: "Athlete", field: "athlete", width: 150},
    // 你的其他列定义...
  ];

  $scope.gridOptions = {
    columnDefs: columnDefs,
    onColumnResized: saveGridState,
    onColumnMoved: saveGridState,
    onFilterChanged: saveGridState,
    onSortChanged: saveGridState,
    // 其他ag-Grid配置项
  };

  // 保存表格状态到localStorage
  function saveGridState() {
    const columnState = $scope.gridOptions.api.getColumnState();
    const filterModel = $scope.gridOptions.api.getFilterModel();
    const sortModel = $scope.gridOptions.api.getSortModel();
    
    const gridState = {
      columnState,
      filterModel,
      sortModel
    };
    
    localStorage.setItem('agGridState', JSON.stringify(gridState));
  }

  // 从localStorage恢复表格状态
  function restoreGridState() {
    const savedState = localStorage.getItem('agGridState');
    if (!savedState) return;
    
    const gridState = JSON.parse(savedState);
    $scope.gridOptions.api.setColumnState(gridState.columnState);
    $scope.gridOptions.api.setFilterModel(gridState.filterModel);
    $scope.gridOptions.api.setSortModel(gridState.sortModel);
  }

  // 加载数据，优先使用缓存
  $scope.loadData = function() {
    const cachedData = localStorage.getItem('agGridAthleteData');
    if (cachedData) {
      $scope.gridOptions.api.setRowData(JSON.parse(cachedData));
      restoreGridState();
      return;
    }

    $http.get('/your-data-api')
      .then(function(response) {
        $scope.gridOptions.api.setRowData(response.data);
        localStorage.setItem('agGridAthleteData', JSON.stringify(response.data));
        saveGridState();
      })
      .catch(err => console.error('数据加载失败:', err));
  };

  // 页面初始化自动恢复数据和状态
  angular.element(document).ready(function() {
    const cachedData = localStorage.getItem('agGridAthleteData');
    if (cachedData) {
      $scope.gridOptions.api.setRowData(JSON.parse(cachedData));
      restoreGridState();
    } else {
      $scope.loadData();
    }
  });
});

额外注意点 #

• 如果后端数据会定期更新，可以给缓存加个时间戳，超过指定时间就自动重新请求接口
• 如果表格数据量极大（超过5MB），localStorage可能不够用，这时候可以考虑用IndexedDB或者后端会话存储
• 如果不想永久保存数据，可以把localStorage换成sessionStorage，关闭浏览器就会自动清空缓存

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