前端 UI 组件库 WijmoJS V2020.0 Update1 正式发布!

这一版本将更加体现出 WijmoJS 的小巧、灵活和高效。我们将 WijmoJS 的组件和功能模块化,减少了应用程序加载时所需的时间。同时,我们还优化了数据渲染引擎(通常使用虚拟化),因此无论您的数据集有多大,我们的组件都可以实现高效加载。

为了响应用户需求,WijmoJS 的新版本加入许多在构建 Web 应用程序时会用到的功能,除了可在 React Redux 应用程序中编辑 DataGrid 外,还有针对 FlexGrid 和 FlexChart的增强功能。

本次发布的新功能有:

为 React 框架提供的新功能:可编辑的 React Redux DataGrid

FlexGrid为 React Redux 应用中的可编辑数据网格提供了一个企业级解决方案!

通常情况下,使用 FlexGrid 的用户会通过网格来更新基础数据数组。然而,这种方法不适用于需要数据不变性的状态管理系统(例如 Redux)。

现在,这个问题可以通过使用 ImmutabilityProvider 扩展组件来解决。

引入 FlexGrid,绑定到 Redux Store 的数据数组后,您可以通过以下方式更改网格行为:

  • 允许用户以常规方式(更改项目值、添加/删除行、粘贴和文本)编辑网格数据。
  • 允许所有的数据转换操作,包括排序、分组和过滤。
  • 防止网格因应用户编辑而发生的变异。相反,它会触发 dataChanged 事件,该事件可用于将数据更改操作调度到 Redux Store。

阅读有关可编辑React Redux DataGrid的更多信息

使用 OpenFin 和 JavaScript 组件,构建股票投资组合 APP

WijmoJS 的股票投资组合 APP 是一个 Demo,演示了 OpenFin 应用程序中 WijmoJS 组件的用法。

股票投资组合 APP 包含几个窗口,每个窗口都使用了不同的 Web 框架(包含React、Angular 和 Web 组件)。 OpenFin 的 新Platform API 允许用户在所需的工作区中排列和自定义窗口。

该视频演示了如何借助 WijmoJS 组件,构建股票投资组合APP:

产品安全性增强

随着越来越多的应用程序使用 JavaScript 脚本,客户端的安全性变得至关重要。

内容安全策略(CSP)作为一层额外保护,有助于提前发现并缓解某些类型的攻击,如跨站点脚本(XSS)和数据注入攻击。

WijmoJS 的最新版本完全符合 CSP 策略,并且,不需要您在 CSP 中添加“ unsafe-inline”或“ unsafe-eval”,也不需要“ nonce”或哈希。

针对 FlexGrid、FlexChart、Input 组件的更新

针对 FlexGrid 组件的更新

  • FlexGrid 中实现易于点击的复选框
  • FlexGrid 列选择、多范围复制和粘贴
  • Checkbox Selector Column for FlexGrid (复选框选择器列)
  • Improved Resizing for Hidden Columns and Rows in FlexGrid(改进隐藏行列的大小调整)
  • RadioButton and AutoComplete DataMap Editors for FlexGrid(新增对 RadioButton 和 AutoComplete DataMap 的原生支持)
  • Improved Validation Behavior in FlexGrid(改进了数据验证行为)
  • Expanded Column Pinning Options in FlexGrid(扩展了pinning 固定选项)
  • FlexGrid Button Columns with CellMaker(使用 CellMaker 实现按钮列)
  • FlexGrid Hyperlink Columns with CellMaker(使用 CellMaker 实现超链接列)
  • FlexGrid Image Columns with CellMaker(使用 CellMaker 实现图片列)
  • FlexGrid Star Rating Column with CellMaker(使用 CellMaker 实现星级评分列)
  • FlexGrid Sparkline Columns with CellMaker(使用 CellMaker 实现 Sparkline 列)
  • Excel Export Progress Indicator for FlexGrid(FlexGrid 导出 Excel 进度条)
  • PDF Export Progress Indicator for FlexGrid(FlexGrid 导出 PDF 进度条)
  • PDF Export Progress Indicator for FlexGrid(FlexGrid 导出 PDF 进度条)

针对 FlexChart 组件的更新

  • Plot Revenue Over Expenses with BreakEven Chart for JavaScript Apps(可使用 BreakEven Chart 为 JavaScript 应用程序绘制支出收益表)

针对 Input 组件的更新

  • Easily Filter Long MultiSelect Lists(多选过滤器)
  • More Options for Triggering Popups(为弹出式触发器新增更多选项)

其它新特性:

  • Batch Updates in OdataCollectionView(ODataCollectionView 批量更新)

WijmoJS - 历史版本

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

v

率先全面支持 Angular 的控件集

立即体验 WijmoJS Core 在您应用中对 Angular 的绝佳支持:为所有控件提供丰富的申明标记和深度整合,包括数据表格、图表、仪表盘和输入。您将获得 WijmoJS 闻名遐迩的快速、灵活和零依赖性。

WijmoJS 2018 V3 版本已全面支持 Angular7 !

体验 WijmoJS 的 Angular 控件

WijmoJS 是最早提供完整的 Angular 控件的产品,在 Angular 2 正式版发布当天,Wijmo 即发布支持的版本。从一开始,我们就和 Google 有着密切的合作。基于这样的合作, WijmoJSCore 的表格、图表、输入、仪表盘等控件即具有功能丰富、可扩展性强、迅速灵活等特点。

  • 轻量: 最流行的控件 FlexGrid 的尺寸只有 113KB
  • 零依赖: 用 TypeScript 写的纯 JavaScript 控件
  • 易于阅读而灵活的 API: 极低的学习曲线
  • 扩展性: 所有控件都提供尽可能多的扩展点
  • 熟悉的体验: 表格和图表等控件,提供类似 Excel 的熟悉体验
  • 最好的支持: 葡萄城技术团队提供最好的支持和资源。

FlexGrid:优秀的 Angular 数据表格控件

获得业界灵活的、轻量的数据表格控件,同时也有 Angular 的优点:

内置功能

  • 分组
  • 分页
  • 列布局
  • 树状视图
  • 单元格合并
  • 冻结
  • 全面支持 RTL
  • 灵活的数据绑定

扩展

  • FlexGridFilter 示例
  • DetailRow 示例
  • GroupPanel 示例

FlexChart:快速、灵活的 JavaScript 图表控件

这个轻量的 Angular 图表控件,包含所有的关键功能以及你需要的类似 Excel 的图表类型:

内置功能

  • 灵活的绑定
  • 页眉和页脚
  • 全球化
  • 命中测试
  • 标签
  • 缩放
  • 定制标线和区域

图表类型

  • 柱状图
  • 条图
  • 散点图
  • 折线图
  • 面积图
  • 曲线图
  • 金融图表

输入:触摸优先的输入控件

支持 Angular 的输入控件可以创建丰富的 Hybrid 应用:

内置功能

  • 灵活的数据绑定
  • 流行、简洁的UI
  • 日期、数值类型最大最小范围
  • 时间间隔
  • 弹出框中 HTML 元素
  • 菜单选择中的 MVVM 命令

输入类型

  • 列表框
  • 组合框
  • 自动完成
  • 多选
  • 菜单
  • 日期/时间
  • 数值
  • 颜色
  • 掩码输入
  • 弹出框

产品内容

包含线性、径向、子弹图仪表盘
运行演示

使用 JavaScript 数组作为数据源的 .NET 类
运行演示

有包装列的特殊表格
运行演示

在旭日图中显示层级数据
运行演示

有关键交互和功能的饼图
运行演示

有内置公式的 11 个金融图表
运行演示

具有 Excel 主要功能的轻量级电子表格
运行演示

WijmoJS Core 和 Angular 深度集成

为所有控件提供丰富的声明式标记

  • WijmoJS 的 Angular 2 控件支持单向和双向绑定
  • 使用 Angular 2 绑定表达式动态自定义组件
  • 使用列和单元格模板自定义表格的单元格

 

用 TypeScript 写的纯 JavaScript 控件

  • 无缝的从 WijmoJS 控件过渡到 Angular
  • 支持智能感知
  • 设计时错误检查
  • 您可以享受 ES6 的好处,比如真正的面向对象的 CollectionView 类,和 XAML 平台具有相同的对象模型
  • WijmoJS Core 包含了框架无关的纯 JavaScript 控件,这就意味着您可以在不同的框架间容易的迁移

WijmoJS Core  和 Angular 深度集成

WijmoJS Core 和 Angular 未来之路

  • 全面支持 Angular
  • 继续和谷歌合作支持 Angular
  • 支持其他的 JavaScript 框架,因为 WijmoJS Core 控件是框架无关的,你可以很容易的迁移,包括:

立即下载最新版