WijmoJS 前端开发工具包2024 Update1 新版发布

WijmoJS 是葡萄城推出的一款前端开发工具包，由 80 多款基于 HTML5、支持跨平台的高性能 UI 组件（如表格组件、图表组件、数据分析组件、导航组件和金融图表组件等）构成，完美兼容原生 JavaScript，支持 Angular、React、Vue 等前端框架，用于企业级 Web 应用程序的快速开发和构建。

WijmoJS 2024 Update1 已经发布。此版本包括了 FlexGrid、FlexChart 等主要控件的功能增强。以及对新框架 Next.js 和 Nuxt.js的支持、对Angular 18的支持

FlexGrid 和 FlexGridFilter 功能增强

FlexGrid 在每个版本中都不断改进。此版本包括对粘贴、分组、聚合等功能的改进。

FlexGridFilter现在支持通配符过滤，并在添加或删除行时模仿 Excel 行为

另一个常见需求是希望对初始焦点有更多控制。例如，当 Wijmo 组件获得焦点时，有些客户希望指定组件的哪个部分获得焦点。?

为了提供这种控制，我们引入了一个名为 focusFirst 的新实用程序。这是一个通用解决方案，适用于所有 Wijmo 组件以及任何其他 DOM 元素。

FlexGrid 的筛选对话框中就有一个例子。默认焦点在搜索框上。?

但是，假如一位客户希望将焦点放在“升序”按钮上，以遵循更严格的可访问性准则。可以使用 focusFirst轻松地将过滤器对话框中的初始焦点设置为“升序”按钮。

此外还包括下面的功能增强：

• DataMap 新增菜单编辑器类型

• 一些用于绑定键/值对的新 API。

• 通过添加 mergedRange 属性来获取单击单元格的合并状态，从而改进了 HitTestInfo。

• 添加了在列组标题上设置的 cssClassAll属性。

FlexChart 和 FlexPie 功能增强

FlexChart 在此版本中优化了渲染性能和效果。包括折线和多边形的圆角处理更加平滑、平滑曲线插值得到改进，以及 更好的FlexPie 切片的工具提示。?

我们添加了在 FlexChart 文本中呈现 HTML 的功能。现在，您可以在 FlexChart 中设置htmlText选项并在图表中的文本（标签、图例等）内呈现 HTML 元素。?

日期和时间输入功能增强

更新所有日期和时间输入组件，以支持更好地通过键盘导航日期和时间部分。现在，您可以使用向上和向下箭头键来增加或减少日期和时间对象的每个部分。?

工具提示可访问性功能增强

现在，只要鼠标停留在工具提示上，工具提示就会保持可见，按 ESC 键将关闭工具提示。

Angular 18 支持

WijmoJS已经完全支持 Angular 18。我们在 Angular 方面有着悠久的支持传统，包括对标记的支持，例如在 FlexGrid 中的单元格模板中使用。

新的 Next.js 支持

Next.js 是一个功能强大的 React 框架，它为构建现代 Web 应用程序提供了一个强大的平台。我们很高兴宣布 Next.js 应用程序正式支持 WijmoJS。?

WijmoJS 的 React Interop 可让您在 Next.js 项目中使用 WijmoJS 控件。互操作充当 Wijmo 控件的包装器，创建和管理底层控件实例，同时通过 ref 属性提供引用。此设置允许您以声明方式绑定到控件属性和事件，与您的 React 组件无缝集成。

为了在 Next.js 应用程序中成功使用 WijmoJS 组件，您需要确保这些组件仅在客户端呈现，因为不支持服务器端渲染（SSR）。

新的 Nuxt.js 支持

Nuxt.js 是一个基于 Vue.js 构建的强大框架，可用于开发通用的服务器渲染 Web 应用程序。我们很高兴地宣布，Nuxt.js 应用程序正式支持 WijmoJS。

适用于 Vue2 的 WijmoJS 组件允许您在 Nuxt.js 项目中使用 WijmoJS 控件。WijmoJS Vue2 组件是 Wijmo 控件的包装器，它在后台创建 WijmoJS控件并通过 ref 属性提供对控件实例的引用，允许您以声明方式绑定到控件属性和事件。?

支持React强类型

我们已将 React 互操作性改为强类型，从而改进了它。现在，React 组件将使用更多类型（以前是任意类型）来帮助防止开发期间出现错误。?

注意：React TypeScript 用户可能会因这些更改而在其应用中弹出类型错误。请参阅下面的重大更改部分。

支持计划变更

• Wijmo AngularJS 支持终止公告：自 2022 年 1 月起，AngularJS 已不再受支持。因此，Wijmo 计划停止支持 AngularJS。在我们的 2024v2 版本中，我们将不再为 Wijmo 发布 AngularJS 互操作。我们鼓励您使用 Wijmo 完全支持的Angular 版本。

• Wijmo KnockoutJS 支持终止公告：KnockoutJS 自 2019 年以来一直未更新或发布。因此，Wijmo 计划停止支持 KnockoutJS。在我们的 2024v2 版本（2024 年 9 月）中，我们将不再为 Wijmo 发布 KnockoutJS 互操作。我们鼓励您使用 Wijmo 完全支持的现代框架，例如 Angular、React 或 Vue。?

注意事项

• [React] 如果依赖非自关闭的 JSX 组件，使用 React 互操作的 TypeScript 项目可能会遇到与 JSX 语法相关的编译错误。React interop 现在是严格类型化的，因??此根据构建设置，类型错误可能会阻止项目构建，直到所有错误都得到解决。大多数情况下，类型错误很容易修复。我们只需要为属性分配正确的类型。

• [React][TreeView][Accordion] 由于引入了包装 <div> 元素，TabPanel 和 Accordion 组件可能会出现布局不一致或意外样式的问题。React interop 用于 Tab 和 AccordionPane 组件，以前提供的 HTML 内容直接添加到控件主体中，现在则包裹在 div 元素内。

• [FlexGrid] 在列上设置时，cssClass 和 cssClassAll 不适用于列组标题。此更改会影响 Column 的 cssClassAll 属性的功能。它将为用户提供更精细的设置和控制，以设置列组标题的样式。最后，cssClass属性仅适用于数据单元，保持与 5.20232.939 及更早版本相同的功能。