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

这是一个确认的臭虫 of AgGrid。在调用ColumnApi.applyColumnState()之后，auto组列被移到最右边。同时，一个简单的解决办法是：

• 使用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