如何在AG Grid中恢复选中行状态？已存状态但选中行未恢复

你已经成功保存了网格状态，排序能恢复但选中行没回来，大概率是这几个问题导致的，逐个排查：

1. 行ID匹配不对 #

AG Grid靠行的唯一ID来恢复选中状态，默认认id字段，但你的数据用的是_id，得告诉AG Grid用哪个字段当行ID：

this.gridOptions = {
  // 告诉AG Grid用数据里的_id作为行的唯一标识
  getRowId: (params) => params.data._id,
  // 这里的rowSelection要和你保存状态时的模式一致，是single就写single，multiple就写multiple
  rowSelection: 'single',
  // 其他原有配置...
};

2. 恢复状态的时机太早 #

你在构造函数里设置initialState的时候，网格可能还没加载数据呢，AG Grid找不到对应的行，自然恢复不了选中状态。换个时机，等网格准备好、数据加载完再手动恢复：

private gridApi: GridApi<any>;

override onGridReady(params: GridReadyEvent<any>): void {
  super.onGridReady(params);
  this.gridApi = params.api;
  
  // 如果数据是同步加载的，直接调用setState恢复
  if (this.service.gridState) {
    this.gridApi.setState(this.service.gridState);
  }
}

// 如果数据是异步从接口拿的，等数据回来再恢复
loadData(): void {
  this.yourDataService.getData().subscribe(data => {
    this.rowData = data;
    // 数据加载完成后再恢复状态
    if (this.gridApi && this.service.gridState) {
      this.gridApi.setState(this.service.gridState);
    }
  });
}

3. rowSelection模式不匹配 #

保存状态时用的是单选（single）还是多选（multiple），恢复时网格的rowSelection配置必须和之前一致，不然AG Grid不知道怎么处理选中状态。比如之前是单选，现在网格配置成多选，就会恢复失败。

4. 版本兼容性问题 #

看你日志里的状态版本是32.1.0，确保当前AG Grid的版本和这个一致，版本不一样可能会有状态不兼容的情况，导致部分状态恢复失败。

修改后的完整代码参考 #

保存状态的代码（不用改） #

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 });
}

恢复状态的代码（调整后） #

constructor() {
  super(route, router);
  this.gridOptions = {
    getRowId: (params) => params.data._id,
    rowSelection: 'single', // 匹配你实际的选择模式
    // 其他原有配置...
  };
}

private gridApi: GridApi<any>;

override onGridReady(params: GridReadyEvent<any>): void {
  super.onGridReady(params);
  this.gridApi = params.api;
  
  // 同步数据场景下直接恢复
  if (this.service.gridState) {
    this.gridApi.setState(this.service.gridState);
  }
}

// 异步数据加载场景
fetchGridData(): void {
  this.dataService.getGridData().subscribe(data => {
    this.rowData = data;
    // 数据加载完成后恢复状态
    if (this.gridApi && this.service.gridState) {
      this.gridApi.setState(this.service.gridState);
    }
  });
}

按上面的步骤调整后，选中行的状态应该就能正常恢复了。

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