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

时间:2017-04-07 05:23:30

标签: web-component ag-grid

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

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

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

The way they are shown in the tool panel. Want to sort it say alphabetically

The order they are shown in the grid

是否可以按顺序(按字母顺序)在工具面板中对它们进行排序,但不更改它们在网格中显示的顺序。

我尝试了什么:

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

问题:

  1. 这是否可行/可行?
  2. moveColumn()功能不起作用。你能说出它引入的版本无法在changeLog中找到它。
  3. 其他详细信息:

    使用ag-grid企业版v6.4.0

1 个答案:

答案 0 :(得分: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