前端开发工具包 WijmoJS 在2019年的第二个主要版本 V2019.0 Update2 已经发布,本次发布包括了在 React 和 Vue 框架下 WijmoJS 前端组件功能的增强,以及多项新增功能和性能优化。

WijmoJS 前端开发工具包由多款灵活高效、零依赖、轻量级的纯前端控件组成,如表格控件 FlexGrid、图表控件 FlexChart、数据分析 OLAP 等,完美支持原生 JavaScript,以及 Angular、React、Vue、TypeScript、Knockout 和 Ionic 等框架,可用于企业快速构建桌面、移动 Web 应用程序。

在列举前端开发工具包 WijmoJS V2019.0 Update2 的全部功能之前,请下载最新安装程序,以便同步体验!>>前端开发工具包 WijmoJS 最新下载地址

前端开发工具包 WijmoJS V2019.0 Update2 的主要新特性有:

React 框架下 WijmoJS 组件功能增强

React 框架已经大受欢迎,WijmoJS 也一直在增强在 React 框架下的各组件功能。在新版本中,WijmoJS 提供了一些不错的方法来定义自定义模板,如在脚本中绑定具有 Items 标记的所有控件。

与此同时,WijmoJS 还添加了 MenuItem 和 MenuSeparator 组件。

React 框架下 WijmoJS 组件功能增强

详细了解《WijmoJS 中自定义 React 菜单和列表项模板》

除了上述增强功能,WijmoJS 还为这些控件添加了一个全新的 wjItemTemplate '渲染道具':

  • ListBox
  • ComboBox
  • MultiSelect
  • 菜单

Vue 框架下 WijmoJS 组件功能增强

与 React 框架下的功能增强类似,WijmoJS 针对 Vue 框架的互操作也做了很好的优化。在新版本中,WijmoJS 为 Vue 菜单项添加了 wj-menu-item 和 wj-menu-separator 组件。

详细了解《WijmoJS 以声明方式添加 Vue 菜单项》

仪表盘的自定义能力增强

为了在 WijmoJS 的仪表盘中显示更多细节,新版本添加了全新的属性:Gauge.showTickText,该属性可以用来显示每个 tickmark 旁边的文本标签。

仪表盘的自定义能力增强

此外,WijmoJS 还使用新的 RadialGauge 属性和方法,添加了对针型指针的支持:

  • needleShape
  • needleLength
  • needleElement
  • createNeedleElement

新增模板文字常量

在新版本中,WijmoJS 添加了一个新的 i18n 模板文字函数。它允许您使用内插值构建多行字符串,并且可以轻松处理字符串中嵌入的单引号和双引号。

详细了解《WijmoJS 支持模板字符串常量》

Undo / Redo(撤销/重做)

如今,几乎所有优秀的 Web 应用程序都可以实现 Undo / Redo(撤消和重做)操作。在新版本中,WijmoJS 推出了一个更高效的解决方案:使用 Undo / Redo 类来管理应用程序级别的操作历史。

当然,您完全可以将它与 FlexGrid 一起使用,但我们更建议您在整个应用程序中尝试此方法!

详细了解《使用 WijmoJS 轻松实现 Undo / Redo(撤消重做)》

全新的分页控件

在新版本中,WijmoJS 新增了一个 New CollectionViewNavigator 控件,该控件用于浏览 CollectionView 项目或页面,它可以轻松地与我们的任何控件(如 FlexGrid)一起使用,以提供简单的数据分页样式。

全新的分页控件

FlexGrid 中的多区域选择

在新版本中,WijmoJS 为 FlexGrid 提供了类似 Excel 的多范围选择功能,这项新功能允许用户按住 ctrl(或命令)在 FlexGrid 中同时选择多个单元格范围。

该功能是通过一个名为 MultiRange 的新 SelectionMode 来支持的,用户通过添加一个 selectedRanges 属性,即可获取包含 CellRange 对象的数组,该对象包含当前选定的范围。

FlexGrid 中的多区域选择

FlexGrid 中性能调优 API

在新版本中,WijmoJS 添加了新的 API,用于在更罕见的场景下优化性能时使用。因为针对的场景特殊,使用时请务必仔细阅读文档。

  • 新的FlexGrid.refreshRange方法
  • FlexGrid.lazyRender属性
  • FlexGrid.refreshOnEdit属性

全球化中更多语言支持

WijmoJS 一直在扩展全球化组件,以帮助客户构建更完美的应用程序。在新版本中,WijmoJS 将支持:

  • Mongolian
  • Vietnamese
  • Swiss German

除此之外,WijmoJS 还更新并优化了不少已有组件,如 Resizable Popup 或 wijmo.format 中的深度绑定。您可通过下方列表查看其他更新项目。

其他更新项目

  • 添加了 FlexGrid.autoRowHeights 属性,可在加载、编辑单元格以及网格布局更改时自动调整行高。
  • 添加了 FlexGrid.lazyRender 和 refreshOnEdit 属性以实现更多性能控制。
  • 添加了新的 FlexGrid 选择模式:SelectionMode.MultiRange 和 FlexGrid.selectedRanges 属性,该属性提供对扩展选择的访问。
  • 添加了 CollectionViewNavigator 控件,用于导航 CollectionView 项目或页面。
  • 添加了“glbz”标记功能以支持模板文字中的格式。
  • 在 wijmo.format 方法中添加了对深度绑定的支持。
  • 添加了 Popup.isResizable 属性以创建可调整大小的对话框。
  • 添加了 Gauge.showTickText 属性以显示每个 tickmark 旁边的文本标签。
  • 使用新的 RadialGauge 属性和方法添加了对基于针的指针的支持:needleShape,needleLength,needleElement,createNeedleElement。
  • [React]添加了 MenuItem 和 MenuSeparator 组件,允许您以声明方式定义菜单组件项。已更新所有相关样本以声明性地定义菜单。添加了新的“输入、菜单、动态项目”示例。
  • [React]在 ListBox,ComboBox,MultiSelect 和 Menu 组件中添加了 wjItemTemplate“render prop”。该属性允许您指定用于绘制自定义项目内容的渲染函数。以下示例演示了属性用法:
    - 输入、列表框、定制
    - 输入、组合框、HTMLContent
    - 输入、组合框、多列
    - 输入、多选、定制
    - 输入、菜单、动态项目
  • [Vue]添加了wj-menu-item 和 wj-menu-separator 组件,允许您以声明方式定义 wj-menu 组件项。已更新所有相关样本以声明性地定义菜单。添加了新的“输入、菜单、动态项目”示例。
  • 增加了瑞士 - 德国文化档案:wijmo.culture.de-CH.ts。随着最近增加的越南和蒙古文化(wijmo.culture.vi.ts 和 wijmo.culture.mn-MN.ts),这使得支持的文化总数达到 50 个。
  • 添加了 FlexSheet.allowAutoFill 属性。(TFS 377969)
  • [FlexChart]添加了 Legend.orientation 属性。(TFS 379230)

WijmoJS - 历史版本

查看更多关于 WijmoJS 历史版本的新特性。