（ag-grid）动画动态添加的列

Posted 2023-03-28

【中文标题】（ag-grid）动画动态添加的列

【英文标题】：(ag-grid) Animate dynamically added columns

【发布时间】：2019-03-28 06:57:26

【问题描述】：

正如我们在https://www.ag-grid.com/javascript-grid-column-menu/ 上看到的，当用户从菜单中选中/取消选中某一列时，网格会为其他列设置动画。

我正在使用 columnDefs 动态地引入一些列：

this.columnDefs = [
   headerName: 'Name', field: 'name', width: 200 ,
   headerName: 'S01F01', hide: this.solver !== 'solver1', field: 'age', width: 90, suppressToolPanel: true ,
  ...
];

我已将隐藏/显示标志绑定到 UI 上的按钮，这些按钮将在需要时将一组列带入网格。尽管列正确显示，但它们只是出现而不是动画到网格中。我理解这是因为每次用户单击按钮时我只是更新整个网格的 columnDefs。

有没有办法让我在单击按钮时显示这些列，同时触发动画？

【参考方案1】：

除非您有此网格属性suppressColumnMoveAnimation=true，否则列应该默认启用动画。 根据docs

默认开启列动画，关闭行动画 默认。这是为了与预期最常见的内容保持一致 默认配置。

【讨论】：

这是有道理的，但在我的情况下并没有发生。你可以看到我用来更新下面列的具体代码：toggleChange(event) const toggle = event.source; if (toggle) const groupbutton = toggle.buttonToggleGroup; if (event.value.some(item => item === toggle.value)) groupbutton.value = [toggle.value]; this.solver = toggle ? toggle.value : ''; this.setColumnDefs(); setColumnDefs = () => this.columnDefs = [ headerName: 'Name', field: 'name', width: 200 , ... ]