AG-Grid工具面板的列部分有移动列的方法吗？答案

【问题标题】：Is there way moving columns in the column section of the tool panel of AG-Grid?AG-Grid工具面板的列部分有移动列的方法吗？
【发布时间】：2021-04-01 10:59:58
【问题描述】：

我对@987654326@ 很陌生。我正在寻找一种在工具面板的列选择中对列进行排序的方法。（另见下图，官方文档截图：https://www.ag-grid.com/javascript-grid-tool-panel-columns/#suppress-sections）

图片：column section tool panel of ag-grid

我知道通过将列拖放到网格中来对列进行排序是可能的。对于这种情况，我设置了选项defaultColDef: { sortable: true } (https://www.ag-grid.com/javascript-grid-sorting/) 这也将与工具面板中的列表同步。

但我的特殊用例的原因是：水平滚动和排序 20-30 整列比在提到的工具面板中垂直排序名称列表更难。这就是为什么我尝试使用拖放事件之类的工具对工具面板中的列进行排序/重新排序的原因。但我找不到访问列工具面板 api 之类的方法。

我还在ag-grid 企业支持中找到了一个条目，其中我的用例被称为复杂功能，但这篇文章现在已有两年历史了。而且我在他们的管道中找不到提到的这个功能的票号。（另见：https://ag-grid.zendesk.com/hc/en-us/articles/360004964851-Can-I-change-the-order-of-the-columns-in-the-tool-panel-NOT-YET-NO-ETA-）

【问题讨论】：

如果你喜欢我的回答/它有效，你能接受吗，所以我知道否则会删除它，所以我不会浪费其他想要查看这个问题答案的人的时间（他们可能有类似的问题）
@MontresorXPL 谢谢，但您的建议解决了另一个用例。它用于切换一列或多列的可见性。（另见：stackoverflow.com/a/56294034/13123094）这不是我要找的。我想在工具面板的内列部分对列进行排序，但找不到正确的 api 或事件处理程序。
谢谢，没关系

标签： ag-grid ag-grid-react

【解决方案1】：

由于我们最近为 Ag Grid 购买了企业许可证并且也遇到了这个问题，因此我直接联系了他们。这是一个在他们的产品待办列表中被跟踪的项目（还没有计划发布 - https://www.ag-grid.com/ag-grid-pipeline/ 搜索 4139）。与此同时，我必须通过实现我自己的拖放重新排序列表和 Ag Grid 列 API moveColumn(colKey, toIndex) 方法的组合来解决这个问题。 (https://www.ag-grid.com/angular-grid/column-api/)。关于拖放列表，有很多选项，但我们使用了 Angular 材质 UI https://material.angular.io/cdk/drag-drop/overview#reordering-lists，这非常简单。在上面的 Material UI 链接中，他们提供了一个代码示例 dropevent 处理程序，该处理程序与 Ag 列 API 相结合，如下所示：

drop(event: CdkDragDrop<string[]>) {
  moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
  columnApi.moveColumn(colKey, event.currentIndex); // this is the Ag Grid column api
}

这不是最好的解决方案，但在他们实施该功能之前是一个权宜之计。

【讨论】：

更新：Ag Grid 的 26.1.0 版本似乎解决了这个问题。搜索 AG-4139，它被标记为“完成”。