Ag-grid 恢复数据

Question

我正在使用 ag-grid 加载数据。加载数据后，我想保存 ag-grid 的状态并恢复它以供将来使用。通过文档我了解到我应该使用columnApi 来保存状态。要在恢复状态时加载数据，我应该进行哪些更改，以及我应该在哪里调用恢复状态而不是使用单独的按钮？

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

Answer 1

假设您有一个名为GridParentComponent 的组件，其中有您的ag-grid 为了便于理解，假设我们现在只对网格的columnState 感兴趣。

您必须按照以下步骤来实现此目的。

1. 获取网格在从 DOM 中卸载之前的状态。采用 OnDestroy 在这里。

   • 实现接口OnDestroy，在ngOnDestroy函数中，使用getColumnState()的gridApi。
   • 将此数据存储在 Angular 服务中，并在用户再次访问同一屏幕时使用它。
   • 如果您还想在关闭浏览器后保持网格状态，可以使用localStorage 或ng2-cache 等api 来存储数据。

2. 设置网格加载到 DOM 时的状态。

   • 在onGridReady 事件中，从缓存中获取columnState 数据，或者最好从单例服务中获取数据，该服务从内存中或localStorage 中取回数据
   • 使用gridApi.setColumnState(columnState)，设置columnState。

如果您打算通过应用程序在多个地方使用此功能，我宁愿建议您使用包装器组件并将执行这些操作的逻辑分离到此组件中，而不是将此逻辑保留在您的 GridParentComponent 中。