[AG Grid 28 中的新增功能](https://res.cloudinary.com/practicaldev/image/fetch/s--wLlB3sKP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// blog.ag-grid.com/content/images/2022/07/Whats-new-v28.0-1.png)

AG Grid 28 是具有许多新功能的主要版本 -完整的 Angular Ivy 支持、粘性组行、带有自动换行的列标题、使用 CSS 变量的主题、将行组导出到 Excel 作为可扩展/可折叠等等。

由于这是一个主要版本,我们已弃用某些 API 成员作为这些更新的一部分。我们建议在计划更新到此版本时查看发行说明中的弃用和重大更改列表。

请在我们的更改日志](https://www.ag-grid.com/ag-grid-changelog/?fixVersion=28.0.0)中查看完整的更改列表[。

使用 CSS 变量的主题

在 AG Grid 28 中,通过移植我们的网格布局系统以使用 CSS 变量,我们显着增强了主题功能。 AG Grid 27 和更早的版本使用 Sass。

当您升级到 AG Grid 28 时,您现有的主题不会中断,如此处所述。但是,只有使用AG Grid CSS Variables使用新主题重建主题时,您才能使用新的样式功能。

支持行数据和单元格值的 Typescript 泛型

AG Grid 28 增加了对行数据和单元格值的Typescript Generics的支持。这通过代码完成和行数据和单元格值属性的编译时验证极大地改善了开发人员的体验。

粘性组行

粘性组行在滚动浏览行组子行时在视口顶部显示展开的组行。当您启用粘性组用户将始终知道他们正在滚动浏览哪个组的行,如下所示:

[AG Grid 28 中的新增功能](https://res.cloudinary.com/practicaldev/image/fetch/s--deUvjYqG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https:// blog.ag-grid.com/content/images/2022/07/sticky_group_rows.gif)

单独排序组列

您现在可以通过单击组面板](https://www.ag-grid.com/javascript-data-grid/grouping-group-panel/#example-row-group-panel)和列工具面板中的[组列项分别设置不同组列的排序方向,如下图GIF所示。这使用户在处理数据的方式上更加灵活。

[AG Grid 28 中的新增功能](https://res.cloudinary.com/practicaldev/image/fetch/s--yhCL_Ogw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https:// blog.ag-grid.com/content/images/2022/07/rowgroup_sorting.gif)

服务器端行模型

AG Grid 28 允许在使用无限滚动时执行刷新时保留行组展开状态。请参阅此处演示的。

此外,当不使用无限滚动时,AG Grid 现在允许服务器端排序和过滤。这样,您现在可以使用服务器端过滤来避免空行组,同时利用服务器端行模型的优势,默认情况下检索一个级别的所有记录。

列标题自动换行

列标题行可以根据标题单元格的内容自动设置其高度。当您激活列标题自动高度时,您的列标题文本将自动换行,并且列标题行将自动调整大小,如下所示:

[AG Grid 28 中的新增功能](https://res.cloudinary.com/practicaldev/image/fetch/s--ZnapUuQH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https:// blog.ag-grid.com/content/images/2022/07/column_header_wrap.gif)

允许从选定的单元格范围中取消选择单元格

您可以通过按住 CTRL 键并单击或拖动所选单元格,从现有选定单元格范围](https://www.ag-grid.com/javascript-data-grid/range-selection/#range-deselection)中取消选择单元格[,如下所示:

[AG Grid 28 中的新功能](https://res.cloudinary.com/practicaldev/image/fetch/s--p2P2WlX3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https:// blog.ag-grid.com/content/images/2022/07/range_deselection.gif)

将行组/树数据行作为可扩展行组导出到 Excel

AG Grid 中的行组和树数据行现在在 Excel](https://www.ag-grid.com/javascript-data-grid/excel-export/)中导出为[行组。这允许您在 Excel 中展开/折叠不同的组级别,就像在 AG Grid 本身中一样,如下所示:

[AG Grid 28 中的新增功能](https://res.cloudinary.com/practicaldev/image/fetch/s--iu8_yWqs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https:// blog.ag-grid.com/content/images/2022/07/expand_collapse_row_groups.gif)

图表

作为 AG Grid 28 的一部分,我们改进了以下图表功能:

  • 显示大量数据时改进的工具提示渲染性能

  • 添加了条形/柱形系列支持数字/时间轴,允许使用柱形图绘制时间序列数据

  • 增加图例项标签最大长度设置,确保长系列标签得到正确处理

总结

AG Grid 28 在最终用户功能和开发人员生产力方面向前迈出了一大步。它在行分组、服务器端行模型、主题和开发人员生产力方面增加了重大改进。

我们建议在计划更新到此版本时查看发行说明中的弃用和重大更改列表。请在我们的变更日志](https://www.ag-grid.com/ag-grid-changelog/?fixVersion=28.0.0)中查看完整的变更列表[。

与往常一样,我们很乐意帮助您升级并听取您的反馈。

快乐编码!

Logo

React社区为您提供最前沿的新闻资讯和知识内容

更多推荐