JavaScript数据网格方案AG Grid 34.2 发布：更灵活的数据结构、更流畅的大数据交互与全新 UI 体验
<p><img src="https://image.evget.com/attachment/keditor/image/20250915/141303_7.png"></p><p>近日，JavaScript 数据表格方案<strong><u>AG Grid</u></strong>版本，本次更新为开发者带来了更灵活的数据分组方式、更顺畅的大数据集交互体验，以及更直观的 UI 提示与操作反馈。</p>
<p style="text-align: center"><span style="color: rgba(230, 126, 35, 1)"><strong>AG Grid最新版下载，请联系AG Grid中国区合作伙伴<span style="text-decoration: underline">慧都科技</span></strong></span></p>
<p>以下为本次更新的核心亮点：</p>
<h2>核心功能更新</h2>
<h3>1. 日期与时间分组</h3>
<p>支持基于日期的层级分组（如日、周、月、季度、年等），开发者可通过rowGroupingHierarchy或groupHierarchyConfig来实现内置或自定义分组方式，满足更多业务场景下的数据分析需求。</p>
<pre class="prettyprint lang-js highlighter-hljs"><code>const = useState([
{
field: 'date',
rowGroup: true,
rowGroupingHierarchy: ['year', 'month'] // Built-in
},
// ...other column definitions
]);
// Custom Grouping Definitions
const groupHierarchyConfig = useMemo(() => {
return {
week: {
headerValueGetter: (params) => { /* Grouping Definiton */ },
valueGetter: (params) => { /* Grouping Definiton */ }
}
}
});
<AgGridReact
columnDefs={columnDefs}
groupHierarchyConfig={groupHierarchyConfig}
/></code></pre>
<h3><img src="https://image.evget.com/2025/09/15/screenshot_2025-09-15_14-19-06yyq75jap8ebqh2k7.gif"></h3>
<h3>2. 工具面板外置</h3>
<p>在 <strong><u>AG Grid 34.2</u></strong> 中，工具面板不仅可以在默认的侧边栏中显示，还可以被渲染到网格外的容器中，例如弹窗或独立 UI 区域。这使得开发者在小屏幕或紧凑布局中，能更灵活地组织界面。</p>
<pre class="prettyprint lang-js highlighter-hljs"><code>const columnsToolPanel = useMemo(() => {
return {
parent: popupContentRef.current, // Define tool panel container
...
};
}, );
return (
<AgGridReact
// Element that contains the tool panel's container & the grid
popupParent={document.body}
...
/>
/* Div to display the Column Tool Panel in */
<div id="popup" ref={popupRef}>...</div>
);</code></pre>
<div><img src="https://image.evget.com/2025/09/15/screenshot_2025-09-15_14-21-27jgku8xvep7ysjjc8.gif"></div>
<h3>3. SSRM 模型下的组展开/收起</h3>
<p>在服务端行模型（SSRM）中，现在可以一次性展开或收起所有分组，包括尚未加载到客户端的数据。通过expandAll()、collapseAll()API 及ssrmExpandAllAffectsAllRows配置，用户可更流畅地浏览海量分组数据。</p>
<p><img src="https://image.evget.com/2025/09/15/screenshot_2025-09-15_14-24-00wpr1i8jasdyf8ym5.gif"></p>
<h3>4. 剪贴板增强</h3>
<p><strong><u>AG Grid 34.2</u></strong> 优化了复制粘贴体验：</p>
<ul>
<li>
<p>支持将复制的单元格区域粘贴到大小不同的区域，行为更贴近 Excel。</p>
</li>
<li>
<p>支持通过右键菜单执行粘贴操作。</p>
</li>
<li>
<p>在大数据场景（SSRM）下复制大范围单元格时，性能进一步优化。</p>
</li>
</ul>
<h3>5. 行拖拽改进</h3>
<p>新增isRowValidDropPosition回调，允许在自定义拖拽逻辑中校验行是否可放置，并在无效位置自动显示“禁止”图标，支持通过 Theming API 定制图标样式，为用户提供即时、直观的反馈。</p>
<p><img src="https://image.evget.com/2025/09/15/screenshot_2025-09-15_14-26-03scn9ujwscg5r31s6.gif"></p>
<h2>升级提示</h2>
<p><strong><u>AG Grid 34.2</u></strong> 为 <strong>非破坏性更新</strong>，目前使用 33.x 版本的用户可直接升级，无需修改代码。</p>
<h2>总结</h2>
<p><strong><u>AG Grid 34.2 </u></strong>带来了：</p>
<ul>
<li>
<p>更灵活的日期时间分组</p>
</li>
<li>
<p>工具面板外置显示</p>
</li>
<li>
<p>SSRM 下的全局组展开/收起</p>
</li>
<li>
<p>Excel 风格的剪贴板增强</p>
</li>
<li>
<p>更清晰的拖拽反馈</p>
</li>
</ul>
<p>这些功能大幅提升了数据处理的灵活性与用户体验，帮助开发者在构建复杂应用时更加高效。</p>
<h3>📌 <strong>关于 AG Grid</strong></h3>
<p><strong>AG Grid </strong>是全球知名的 JavaScript 数据表格控件，广泛应用于金融、电信、制造等行业，支持 Angular、React、Vue 和纯 JavaScript 项目，拥有企业级的性能与功能深度。</p>
<p><span style="color: rgba(230, 126, 35, 1)"><strong>AG Grid最新版下载，请联系AG Grid中国区合作伙伴<span style="text-decoration: underline">慧都科技</span></strong></span></p><br><br>
来源：https://www.cnblogs.com/software-Development/p/19092954
頁:
[1]