javascript - 农业网格 : Restoring state is moving auto group column to the right

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

这是一个 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