前端开发工具包WijmoJS在2019年的第一个主要版本2019V1已经发布,本次发布包括了更加易用的在线Demo系统、各控件新增功能、NPM 包的改动,以及全新的浏览器API组件。

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

在列举前端开发工具包WijmoJS 2019V1的全部功能之前,请下载最新安装程序,以便同步体验!

>>前端开发工具包WijmoJS 2019V1 下载地址

前端开发工具包WijmoJS 2019V1的主要新特性有:

  1. 全新的在线Demo系统
  2. 表格控件 FlexGrid 的新增功能
  3. 数据分析OLAP 的新增功能
  4. 图表控件FlexChart 的新增功能
  5. 其他功能:NPM 包的改动、全新的浏览器API

更加易用的在线Demo系统:包含示例源码、参考文档和API

WijmoJS 在线 Demo 系统中包含了超过 500 种示例源码、200 份文档和统一易读的产品 API 参考,且每一份源码均使用原生 JavaScript(基于 ES6 模块)、Angular(V2+)、Vue(V2+)、React 来实现,助您快速上手,开发无忧。

WijmoJS 希望用户通过全新的在线Demo系统,轻松查询需要使用的功能示例。您也可直接通过搜索功能,查看该示例不同框架下的源码,并对代码进行在线编辑。

》》立即体验

表格控件 FlexGrid 的新增功能

错误提示(errorTip)

表格控件 FlexGrid 中新增错误提示(errorTip),用于在验证错误时显示提示信息。同时,用户还可以针对此功能进行自定义扩展,或将其设置为空(null)。

该功能的效果如下图:

使用单元格的“title”属性时显示验证错误提示

与 Excel 高度类似的数据选择器

FlexGrid中添加了一个名为anchorCursor的选项,其主要功能是提供与 Excel 高度类似的数据选择器。>>查看该功能的JSFiddle示例

与 Excel 高度类似的数据选择器

重构并简化了FlexGrid的CSS规则

WijmoJS 重构并简化了FlexGrid的CSS规则,这样用户自定义单元格背景就变得越来越简单。此前,WijmoJS的单元格CSS选择器不能用单个类选择器重写。但在本次重构之后,您可以自定义一个类,以便更容易地设置单元格背景和文本的样式。>>查看该功能的JSFiddle 示例

重构并简化了FlexGrid的CSS规则

进一步提升了 FlexGrid 的滚动性能

WijmoJS 进一步提高了FlexGrid的滚动性能,并扩展了单元格重新排序逻辑,以便在水平滚动和冻结单元格网格上工作。这是一个不起眼的变化,但对于那些DOM操作更耗时费力的旧浏览器来说,却意味着高效和低耗。当然,它也使FlexGrid在现代浏览器中更快!

数据分析 OLAP 的新增功能

大纲视图

WijmoJS 在OLAP中添加了一个新的PivotGrid.OutlineMode属性:在大纲视图下,PivotGrid以更紧凑的方式呈现行字段。对于具有大量行字段的视图,该功能将十分受用。它类似于Excel在其数据透视表中提供的功能。>>查看在线 Demo 示例

大纲视图

图表控件 FlexChart 的新增功能

新增用户自定义支持:工具提示、数据点外观

FlexChart 添加了两个新功能,使用户自定义变得更加容易:

  1. series.tooltipcontent 属性,允许自定义特定系列的工具提示
  2. series.itemFormatter属性,允许自定义特定系列中数据点的外观

此前,工具提示和数据点外观直接作用于图表中的所有系列。如今,这些新的改进将为具有多个系列的图表添加了更多的灵活性和自定义设置。>>查看在线Demo示例

FlexChart 中新增区域面积图表

WijmoJS 新版本包含了几个全新的图表:如区域面积图。该图表用于强调数量随时间变化的程度,可用于引起人们对总值趋势的注意。

使用方法:通过将图表类型设置为“区域”,然后在序列绑定中设置最小值和最大值,就可以使用此图表类型。>>查看在线 Demo 示例

区域面积图表

FlexPie 多饼图

WijmoJS 允许通过使用同一数据源创建多个饼图“系列”,即可以使用FlexPie在单个图表中可视化更多数据。

使用方法:要创建多个饼图系列,请在FlexPie.binding中指定几个逗号分隔的属性。>>查看在线 Demo 示例

FlexPies

其他功能:NPM 包的改动、全新的浏览器 API

NPM 包的改动

WijmoJS NPM包已移动到 @grapecity 作用域。这带来了明显的好处,如多个模块格式,可大大简化在自己的NPM服务器上托管WijmoJS使用。

以前,WijmoJS NPM模块存储在单个“Wijmo”NPM包中。现在,每个模块都表示为@grapecity作用域中的一个单独的包,如@grapecity/wijmo.input或@grapecity/wijmo.grid。

将应用程序切换为使用新的作用域包需要在应用程序代码中进行一些修改,即更新“import”语句中的WijmoJS模块名。

为了帮助用户顺利过渡,葡萄城技术团队将在一定时间内继续维护非作用域的“wijmo”包。因此,最新的WijmoJS版本将以作用域包和非作用域包的形式提供。但您应该尽快进行应用程序的更新,以便使用@grapecity范围内的新包。

如果您想安装所有文件(类似于WijmoJS包),可以选择 @grapecity/wijmo.all 包。

全新的浏览器API 组件 - ResizedObserver

在这个版本中,WijmoJS 使用一个名为ResizedObserver的新浏览器API来改进所有控件的布局呈现方式。此API允许用户知晓何时该调整控件元素的大小或更改其可见性,以确保 Web 系统的布局样式是否适应它们的容器。

以上就是前端开发工具包 WijmoJS 2019V1的全部内容。如需了解更多,请访问 WijmoJS 产品官网或加入前端技术QQ交流群:720389894

前端开发工具包 WijmoJS 2019V1正式发布:全新的在线 Demo 系统,助您快速上手,开发无忧的更多相关文章

  1. 使用前端开发工具包WijmoJS - 创建自定义DropDownTree控件(包含源代码)

    概述 最近,有客户向我们请求开发一个前端下拉控件,需求是显示了一个列表,其中包含可由用户单独选择的项目控件,该控件将在下拉列表中显示多选TreeView(树形图). 如今WijmoJS已经实现了该控件 ...

  2. [Full-stack] 快速上手开发 - React

    故事背景 [1] 博客笔记结合<React快速上手开发>再次系统地.全面地走一遍. [2] React JS Tutorials:包含了JS --> React --> Red ...

  3. 如何开发一款基于 Vite+Vue3 的在线表格系统(上)

    今天,葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统. 在正式开始项目介绍之前,首先咱们首先来介绍一下Vite和Vue3. Vue3 Vue是什么?大多前端开发者对这个词已毫不陌生了 ...

  4. 如何开发一款基于 vite+vue3 的在线表格系统(下)

    在上篇内容中我们为大家分享了详细介绍Vue3和Vite的相关内容.在本篇中我们将从项目实战出发带大家了解Vite+Vue3 的在线表格系统的构建. 使用Vite初始化Vue3项目 在这里需要注意:根据 ...

  5. 【java框架】MyBatis-Plus(1)--MyBatis-Plus快速上手开发及核心功能体验

    1.MyBatis-Plus入门开发及配置 1.1.MyBatis-Plus简介 MyBatis-Plus(简称 MP)是一个 MyBatis的增强工具,在 MyBatis 的基础上只做增强不做改变, ...

  6. 快速上手开发——JFinal配置(全步骤图文解析)

    摘要: 因为发现官网上只有Eclipse的配置文档,就写了这篇基于IDEA+maven的配置流程.本文使用安装了maven插件的IDEA进行配置,为了照顾IDEA新手,几乎每个步骤都截了图. 环境说明 ...

  7. 【如何快速的开发一个完整的iOS直播app】(原理篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 目录 [如何快速的开发一个完整的iOS直播app](原理篇) [如何快速的开发一个完整的iOS直播app](播放篇) [如何快速的开发一个完整的 ...

  8. 如何快速的开发一个完整的iOS直播app(原理篇)

    目录 [如何快速的开发一个完整的iOS直播app](原理篇) [如何快速的开发一个完整的iOS直播app](播放篇) [如何快速的开发一个完整的iOS直播app](采集篇) 前言 大半年没写博客了,但 ...

  9. 【使用指南】WijmoJS 前端开发工具包

    为方便广大前端开发人员更好的使用 WijmoJS 前端开发工具包,葡萄城专门推出了 WijmoJS 使用指南,该指南详细地介绍了如何把 WijmoJS 各种强大的功能应用到您自己的 Web 项目中,助 ...

随机推荐

  1. SpringBoot项目中,Mybatis的使用

    项目中使用MyBatis的地方很少,可以说是基本不用,慕课网上面这个项目介绍给也就是一些比较简单的使用例子,我用JPA比较的多,MyBatis有两种使用方式 1.导入MyBatis的依赖 <de ...

  2. ckeditor+粘贴word

    最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...

  3. memcpy 与strcpy的区别

      C/C++中mencpy的代码实现:https://www.cnblogs.com/goul/p/10191705.html C/C++中strcpy的代码实现:https://www.cnblo ...

  4. Qbxt 模拟题 day3(am) T3 选数字 (select)(贪心)

    选数字 (select Time Limit:3000ms Memory Limit:64MB 题目描述 LYK 找到了一个 n*m 的矩阵,这个矩阵上都填有一些数字,对于第 i 行第 j 列的位置上 ...

  5. C语言中的位域[转]

    有些信息在存储时,并不需要占用一个完整的字节,而只需要一个或几个二进制位即可;比如:在存放一个开关量时,只有0和1两种状态,只需要使用一个二进制位即可存储;为了节省存储空间,C语言提供了一种数据结构, ...

  6. (Java多线程系列二)线程间同步

    Java多线程间同步 1.什么是线程安全 通过一个案例了解线程安全 案例:需求现在有100张火车票,有两个窗口同时抢火车票,请使用多线程模拟抢票效果. 先来看一个线程不安全的例子 class Sell ...

  7. hadoop+zookeeper+hbase分布式安装

    前期服务器配置 修改/etc/hosts文件,添加以下信息(如果正常IP) 119.23.163.113 master 120.79.116.198 slave1 120.79.116.23 slav ...

  8. elasticsearch 单实例安装启动

    elasticsearch 初次启动 下载 elasticsearch-6.3.2.tar.gz 创建目录 /usr/local/elasticsearch/ 解压 tar -zxf elastics ...

  9. Nginx-rtmp之配置项的管理

    1. 概述 Nginx-rtmp 对 rtmp{...} 内的配置项划分了几个级别: 直接隶属于 rtmp{} 块内的配置项称为 main 配置项. 直接隶属于 server{} 块内的配置项称为 s ...

  10. smarty 模板中输出时间戳为年月日格式

    日期:{:date('Y-m-d',$v['addtime'])}  // $v['addtime']数据库中的时间戳 输出结果: 日期:{:date('Y-m-d H:i:s',$v['addtim ...