ag-grid 不尊重 ColumnDefinitions 中设置的列的列顺序

Posted 2023-03-28

【中文标题】ag-grid 不尊重 ColumnDefinitions 中设置的列的列顺序

【英文标题】：ag-grid not respecting column order of columns set in ColumnDefinitions

【发布时间】：2021-02-03 18:03:32

【问题描述】：

根据 ag-grid，列顺序将遵循它们在列定义中指定的顺序。 Reference

但这在使用 ag-grid-angular 时不起作用。一些列首先显示，即使它们是在列定义的末尾指定的。看看一些示例代码，

// grid.ts
// helper function to generate a definition of a single column
function generateColDef() 
    return  ... ;


// helper function to dynamically generate ColDefs
export function getColDef(someArgs) 
    const someDynamicCols = someArgs.map((arg) => 
        return generateColDef(.....);
    )
    const colDefs = [
        slColumn,   // A column to show serial number
        generateColDef('id', 'ID', 
            editable: false,
        ),
        generateColDef('name', 'Name', 
            editable: false,
        ),
        ...someDynamicCols,
    ];
    return colDefs;


// html
<ag-grid-angular [columnDefs]="colDefs" [rowData]="rowData | async">

// component
args =  some args fetched from server 
colDefs = grid.getColDef(args);
rowData =  some data fetched from server 

我希望首先显示“ID”和“名称”列，然后显示 someDynamicCols 的其余部分。但 ag-grid 有时会先显示 someDynamicCols，然后显示 'ID' 和 'Name' 列。

我尝试使用 ag-grid API 来设置 colDefs 而不是使用 2-way binding，但结果保持不变。

有人能解释一下可能是什么问题吗？是 ag-grid API 还是我做错了什么？

我正在使用角度为 10 的最新 ag-grid (24.0.0)

【问题讨论】：

您能否创建一个小型 plunkr 或 stackblitz 来重现您的问题。它看起来像调试问题..

我的用例使构建 plunkr 有点困难。但我会尝试添加一个。感谢您的建议

只需尝试添加足以重现问题的最少代码，这将使这里的人们易于调试。

【参考方案1】：

编辑 2021/10/20

感谢@JabbyPanda

applyColumnDefOrder API 自 ag-grid 26 起已弃用

AG-5392 - 现在在设置/更新列定义时，网格中列的顺序将始终与列定义的顺序相匹配。在 v26 之前，使用 applyColumnDefOrder 来实现这一点，但现在这是默认行为。

https://www.ag-grid.com/archive/26.0.0/javascript-data-grid/column-updating-definitions/

---

来自 cmets：您需要使用 >= 24.0.0 版本的 ag-grid

---

经过很长时间，我找到了这个问题的答案。我正在添加解决方案，以防它对其他人有帮助。

问题是，我正在使用一些初始列来初始化列定义。因此，当我添加一个新列时，ag-grid 将初始列保留在原位，并在它们之后添加新列。这是默认的 ag-grid 行为。

要覆盖此行为并使 ag-grid 始终遵循列顺序，请在 Grid Options 中将 applyColumnDefOrder 属性设置为 true。

这在 ag-grid 文档中有所提及：https://www.ag-grid.com/javascript-grid-column-updating-definitions/#applying-column-order

【讨论】：

你是救命稻草

您需要使用 24.0.0 或更高版本才能使用此属性。

感谢您的提示。一个简单的修复，但你必须知道如何！

上述针对 ag-grid v24 的文档页面已移至 ag-grid.com/archive/24.0.0/…

【参考方案2】：

applyColumnDefOrder API 自 ag-grid 26 起已弃用

AG-5392 - 现在在设置/更新列定义时，网格中列的顺序将始终与列定义的顺序相匹配。在 v26 之前，使用 applyColumnDefOrder 来实现这一点，但现在这是默认行为。

要关闭此行为，即在更新到列定义之间保持列的顺序，请设置网格属性 maintainColumnOrder=true

https://www.ag-grid.com/archive/26.0.0/javascript-data-grid/column-updating-definitions/

【参考方案3】：

有时，当您多次加载 columnDefs 变量时也会出现此问题，例如，每次单击按钮或类似情况时。

最好只加载/初始化一次 columnDefs 并按需重新加载/刷新行数据。