setColumnState()后如何在左侧显示Group列？

Question

我正在使用 Ag-grid 在我的网站上显示数据。我想允许用户修改视图状态（更改列顺序、组行、过滤器等）；保存修改后的状态；稍后恢复它。我知道这是标准功能，我在这里遵循官方示例：https://www.ag-grid.com/documentation/javascript/column-state/#save-and-apply-state

与示例一样，我的代码使用 const savedState = gridOptions.columnApi.getColumnState(); 到 get/save 列状态。之后，gridOptions.columnApi.applyColumnState({ state: savedState });恢复状态。

我遇到的问题是，如果用户对行进行分组，则“组”列会在恢复列状态时移动到最右侧。它在第一次分组时从左侧开始（这是我想要的），但在恢复时移动到右侧（这不是我想要的）。

如何获取 setColumnState() 后左侧的组列？

我在官方示例中看到了同样的不良行为。举例说明：

转到上面发布的示例 link
按某些领域分组（在本例中为运动）
“组”列自动填充在最左侧（我想要的）
单击：保存状态。重置状态。恢复状态。
还原后的状态现在在最右侧显示“组”列（这不是我想要的）

Answer 1

您必须通过 applyOrder:false 才能获得最左侧的组列。

function restoreState() {
  if (!window.colState) {
    console.log('no columns state to restore by, you must save state first');
    return;
  }
  gridOptions.columnApi.applyColumnState({
    state: window.colState,
    applyOrder: false, // Make it false here
  });
  console.log('column state restored');
}

这是一个活生生的例子：https://plnkr.co/edit/LnViTPw082x0Y9sw?preview

Answer 2

很遗憾，您描述的行为是一个 BUG，它已在当前的 AG Grid 夜间构建版本中得到修复。因此，您需要等到下一个版本（可能是 25.2.0）。

我知道这无济于事，但至少您不会为了找到解决问题的方法而不断折磨自己。您暂时可以做的是应用状态，然后将分组列向左移动。

gridOptions.columnApi.moveColumns(['ag-Grid-AutoColumn'], 0);

参见：https://plnkr.co/edit/Kg4UPNA8aWL6QRgi

setColumnState()后如何在左侧显示Group列？

How to display Group column on the left after setColumnState()?

javascript

ag-grid