首页 文章

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

提问于
浏览
0

Edit: Found out move column doesn't work in v6.4.0

Example Link: 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

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

What I tried:

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

Questions:

  • 这甚至可行/可行吗?

  • moveColumn() 功能无效 . 你能说出它引入的版本无法在changeLog中找到它 .

Additional Details:

使用ag-grid企业版v6.4.0

1 回答

  • 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
    

相关问题