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函数中，使用gridApi的getColumnState()。
   • 将此数据存储在角度服务中，并在用户再次出现在同一屏幕上时使用它。
   • 如果您还希望在浏览器关闭后仍保持网格状态，则可以使用localStorage或apis（例如ng2-cache）来存储数据。

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

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

如果您要通过应用程序在多个位置使用此功能，我建议您使用包装器组件并隔离逻辑以将这些操作执行到此组件中，而不是将此逻辑保留在{{1}内}。