JavaScript数据网格方案AG Grid 34.1更新：提升开发效率，优化测试与布局体验

原创于 2025-08-08 13:55:49 发布 · 976 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #信息可视化 #开发语言 #ag grid #数据表格 #React #Web表格

控件同时被 2 个专栏收录

218 篇文章

订阅专栏

报表图表开发

27 篇文章

订阅专栏

近日，JavaScript 数据表格方案AG Grid 正式发布 34.1 版本，本次更新以“提升开发者生产力、简化测试流程、增强布局与样式控制”为核心目标，带来了多项实用功能与体验优化。值得一提的是，该版本为非中断版本，当前使用 33.x 版本的开发者可无缝升级，无需修改已有代码。

AG Grid最新版下载

以下为本次更新的主要亮点：

✅ Tree Data 与 Master/Detail 的融合支持

34.1版本实现了 Tree Data 与 Master/Detail 视图的无缝集成，父节点与叶子节点均可作为主行进行详情展开。

该功能无需额外配置，只需启用treeData和masterDetail选项，即可实现复杂树状数据的直观展示：

<AgGridReact
  treeData={true}
  masterDetail={true}
/>

此项增强使开发者能够更轻松地组织和展示嵌套数据结构，大幅提升数据可视化效果与用户交互体验。

✅ Test IDs：更高效的测试定位方式

新增的 Test IDs 功能，便于开发者精确定位网格中的元素（如单元格、复选框等），以支持更强健的自动化测试。

通过setupAgTestIds方法，可为交互元素自动添加可自定义的data-testid属性：

if(process.env.NODE_ENV !== "production"){
    setupAgTestIds({ testIdAttribute: 'data-customAttr' });
}

借助 Test IDs，测试脚本更加清晰、稳定，极大提升测试效率与系统可靠性。

✅ 更紧凑的列标题布局

为解决列分组下列头留白过多的问题，AG Grid 34.1 提供了 紧凑型列标题（Compact Column Headers） 选项。启用后，将移除不必要的列头内边距，使表格布局更加紧凑、空间利用更高效：

<AgGridReact
  hidePaddedHeaderRows={true}
/>

该优化在多级列头、复杂分组布局中尤为实用，有效提升表格的可读性与专业感。

✅ 内置图表格式器支持 Grid 上下文

集成图表的格式器（Integrated Charts Formatters）现已支持访问 Grid 的 API 与上下文，开发者可通过该接口复用表格中的格式化逻辑，确保数据在图表与表格中保持一致。

示例代码：

chartThemeOverrides: {
  common: {
    formatter: (params) => {
      const { context } = params;
      const column = colId ? context.api.getColumn(colId) : null;
      const valueFormatter = colDef.valueFormatter;
      return valueFormatter(params.value);
    },
  },
}

该功能虽为底层能力，但大大减少了格式化逻辑的重复编码，提升项目维护性与一致性。

上图演示了使用列值格式化程序来格式化工具提示值的集成图表

✅ 无障碍体验持续优化

34.1 版本在无障碍支持方面持续升级，针对单元格编辑与列菜单功能进行了更完善的键盘导航与屏幕阅读器适配。这些细节优化，有助于打造更包容、专业的产品体验。

🔄 升级提示

AG Grid 34.1 为非破坏性版本，可直接从 33.x 升级，无需改动现有代码，快速享受新功能带来的开发便利与用户体验提升。

📌 关于 AG Grid

AG Grid 是全球领先的 JavaScript 数据表格控件，广泛应用于金融、电信、制造等行业，支持 Angular、React、Vue 和纯 JavaScript 项目，拥有企业级的性能与功能深度。

------------------------------------------------------------

关于慧都科技

慧都科技是一家行业数字化解决方案公司，长期专注于软件、油气与制造行业。公司基于深入的业务理解与管理洞察，以系统化的业务建模驱动技术落地，帮助企业实现智能化运营与长期竞争优势。在软件工程领域，我们提供开发控件、研发管理、代码开发、部署运维等软件开发全链路所需的产品，提供正版授权采购、技术选型、个性化维保等服务，帮助客户实现技术合规、降本增效与风险可控。慧都科技是AG Grid的在中国区的合作伙伴，AG Grid / AG Charts作为JavaScrip表格/图表领域的优秀产品，帮助企业实现轻松构建高性能的表格及图表。