ag-grid 不遵守 ColumnDefinitions 中设置的列的列顺序

Question

根据 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' 和 'Name' 列将首先显示，然后 someDynamicCols 的其余部分将显示。但是 ag-grid 有时会先显示 someDynamicCols，然后显示 'ID' 和 'Name' 列。

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

谁能解释一下问题出在哪里？是 ag-grid API 还是我做错了什么？

我正在使用最新的 ag-grid (24.0.0) angular 10

Answer 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/

From the comments: You need to be on >= 24.0.0 version of ag-grid

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

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

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

ag-grid 文档中提到了这一点：https://www.ag-grid.com/javascript-grid-column-updating-definitions/#applying-column-order

Answer 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/

Answer 3

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

最好只加载/初始化 columnDefs 一次，然后重新加载/刷新行数据 on-demand。

Answer 4

这将确保列的顺序得到维护。

设置网格属性maintainColumnOrder=true

前：

<ag-grid-angular
      style="width: 100%; height: 100%;"
      class="ag-theme-alpine"
      [defaultColDef]="defaultColDef"
      [maintainColumnOrder]="true"
      [columnDefs]="columnDefs"
      [rowData]="rowData"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>

参考: 维护列顺序 - https://www.ag-grid.com/angular-data-grid/column-updating-definitions/

ag-grid 不遵守 ColumnDefinitions 中设置的列的列顺序

ag-grid not respecting column order of columns set in ColumnDefinitions

ag-grid

angular

ag-grid-angular