AgGrid：恢复状态正在向右移动自动组列

Question

我发现 ag-grid v25.1 有一些奇怪的东西

因此，当您第一次添加 rowGrouping 时，它会显示在左侧。见下文：

然后保存状态（添加分组）。现在恢复状态。请参阅下面的行分组列向右移动。

网格声明

<ag-grid-angular
  #agGrid
  style="width: 100%; height: 100%;"
  id="myGrid"
  class="ag-theme-alpine"
  [columnDefs]="columnDefs"
  [defaultColDef]="defaultColDef"
  [sideBar]="sideBar"
  [rowGroupPanelShow]="rowGroupPanelShow"
  [pivotPanelShow]="pivotPanelShow"
  [debug]="true"
  [rowData]="rowData"
  (gridReady)="onGridReady($event)"
></ag-grid-angular>

https://www.ag-grid.com/angular-grid/column-state/#save-and-apply-state

关于这个问题的任何解决方法或任何关于如何修复它的方法？

复制的 Plnkr https://plnkr.co/edit/ja0JupIYgY8g7Pwy?preview

Answer 1

这是 AgGrid 的 confirmed bug。调用 ColumnApi.applyColumnState() 后，自动分组列移至最右侧。同时，一个简单的解决方法是：

使用 ColumnApi.getColumnState().
应用新的列状态。
检查自动分组列是否存在。默认列 ID 为 'ag-Grid-AutoColumn'.
如果是这样，请使用最后一列状态信息调用 ColumnApi.moveColumnByIndex() 将其移回原来的位置。

saveState() {
  window.colState = this.gridColumnApi.getColumnState();
  window.group = this.gridApi;
}

getAutoGroupColIndex(colState) {
  return colState.findIndex(
    (column) => column.colId === 'ag-Grid-AutoColumn'
  );
}

restoreState() {
  if (!window.colState) {
    console.log('no columns state to restore by, you must save state first');
    return;
  }

  const oldAutoColumnIndex = this.getAutoGroupColIndex(window.colState);

  this.gridColumnApi.applyColumnState({
    state: window.colState,
    applyOrder: true,
  });

  const newAutoColumnIndex = this.getAutoGroupColIndex(
    this.gridColumnApi.getColumnState()
  );

  this.gridColumnApi.moveColumnByIndex(
    newAutoColumnIndex,
    oldAutoColumnIndex
  );
}

演示

https://plnkr.co/edit/MS2w9vxMTpcDbOTp

AgGrid：恢复状态正在向右移动自动组列

AgGrid: Restoring state is moving auto group column to the right

javascript

ag-grid

ag-grid-angular

演示