如何恢复Ag网格中选定的行状态

Question

我想在用户离开之前完全恢复网格的状态。其中包括用户单击的选定（突出显示）行。

当用户在单击事件的行期间导航离开网格时，我以编程方式存储 ag 网格的状态：

  override onGridRowClicked(event: RowClickedEvent<any, any>): void {
    const id = event.data._id;

    this.service.gridState = event.api.getState();
    console.log(this.service.gridState);

    this.router.navigate([id], { relativeTo: this.route });
  }

快速控制台日志确实显示所选行的 id 已被选中

{
    "version": "32.1.0",
    ...
    "rowSelection": [
        "id"
    ],
    ...
}

当用户在构造函数中返回网格时设置网格初始状态：

  constructor(
  ) {
    super(route, router);
    this.gridOptions.initialState = this.service.gridState;
  }

排序模型已恢复，但所选行未恢复。

Answer 1

Ag-Grid 在其网站上有一个很好的存储和恢复状态的示例。

该示例已恢复排序和选择。

使用

onGridPreDestroyed

将状态存储在服务中。

public gridOptions: GridOptions = {
    onGridPreDestroyed: (params: GridPreDestroyedEvent<IOlympicData>) => {
        console.log('Grid state on destroy (can be persisted)', params.state);
    },
};

然后使用

initialState

属性绑定来恢复状态。

            <ag-grid-angular
                ...
                [initialState]="initialState"
                ...
            />

Ag Grid 文档 - 保存和恢复状态

Plunkr 演示