如何对工具面板中的列进行排序。银网格答案

【问题标题】：How to sort the columns in the tool panel. Ag-Grid如何对工具面板中的列进行排序。银网格
【发布时间】：2023-03-28 21:21:01
【问题描述】：

编辑：发现移动列在 v6.4.0 中不起作用

示例链接： https://www.ag-grid.com/javascript-grid-tool-panel/toolPanelExample.html

工具面板中可见列的顺序始终与它们在列定义中定义的顺序相同。检查下图。

是否可以在工具面板中按顺序（按字母顺序）对它们进行排序，但不改变它们在网格中显示的顺序。

我尝试了什么：

我尝试在 columnDefination 中按字母顺序定义它们，并尝试使用columnApi.moveColumn() 将它们移动到那里的位置。当我必须移动所有列并定位它们时，这似乎也不起作用，这也增加了复杂性。

问题：

这甚至可能/可行吗？
moveColumn() 功能不工作。你能告诉它是在哪个版本中引入的，在changeLog中找不到它。

其他详情：

使用ag-grid企业版v6.4.0

【问题讨论】：

moveColumn 为我工作，我使用的是 v 7.0.2。如果您可以向我们展示您对 moveColumn 的实现，我们可能会从那里为您提供帮助。
我发现问题出在 ag-grid 的版本上。 moveColumn 在 v6.4 中不起作用。使用最新版本。

标签： web-component ag-grid

【解决方案1】：

请参考this plnkr。我使用了与您相同的基本思想，按字母顺序创建 colDefs，然后在 onGridReady 函数中将列移动到各自的位置。这样做有两个有用的功能，我认为第二个更可取：

moveColumn(colKey, toIndex)
//colKey refers to the id of the column which defaults to the specified field
//toIndex is simply a number that is within the range of columns.

moveColumns(colKeys[], toIndex)
//colKeys[] is an array in the order that you want them to be
  displayed starting at the toIndex

这是我在 plnkr 中的实现方式：

private onReady() {

    // this.gridOptions.columnApi.moveColumn('name',1)
    // this.gridOptions.columnApi.moveColumn('country',2)
    // this.gridOptions.columnApi.moveColumn('dob',3)
    // this.gridOptions.columnApi.moveColumn('skills',4)
    // this.gridOptions.columnApi.moveColumn('proficiency',5)
    // this.gridOptions.columnApi.moveColumn('mobile',6)
    // this.gridOptions.columnApi.moveColumn('landline',7)
    // this.gridOptions.columnApi.moveColumn('address',8),

    this.gridOptions.columnApi.moveColumns(['name', 'country', 'dob', 'skills', 'proficiency', 'mobile', 'landline', 'address'],1)

}

如果您想使用它，还有一个功能可供您使用：

moveColumnByIndex(fromIndex, toIndex)
//This uses just indexes and not the colid/colkey idea if you prefer
  to keep it more anonymous

【讨论】：

moveColumns() 函数很短。感谢您的帮助。