历史版本 - WijmoJS|前端开发工具包|构建企业级Web应用程序的前端UI组件库

WijmoJS 历史版本

V2023.0 Update1

增强了对 React 18 严格模式的支持

在上一个版本中，我们增加对 React 18 的支持，但在严格模式下仍然存在一些限制和警告。在此版本中，完全支持 React 18 严格模式。严格模式可帮助开发人员在开发过程中发现常见错误。

辅助功能改进

我们一直在与客户密切合作，以优化 Wijmo 的可访问性方面，尤其是在一些更复杂的功能中。以下是我们在此版本中添加的一些改进：

改进了 FlexGridFilter 弹出窗口，可以和 excel 一样按条件和按值过滤
改进 Selector 选中状态功能
改进选择器描述标签
改进了屏幕阅读器解释视觉隐藏列的方式
向 FlexGrid 添加了 headersFocusability 属性，允许键盘导航到行和列标题
向 FlexGrid 添加了ariaLabel 属性，用于为网格提供标题

除此之外，我们还修复了与不同屏幕阅读器中的组件行为相关的其他小错误。

支持通过键盘导航聚焦 FlexGrid 标题

一些重要客户希望最终用户能够使用键盘箭头导航到表格的标题。

增强了对 React 18 严格模式的支持

为支持此行为，我们添加了一个新 headersFocusability 属性，该属性可设置为：None（默认）、Row、Column 或 Both。这些设置将决定键盘导航是否继续进入行或列标题。

全球化中的动态文化切换

现代 JavaScript 应用程序需要能够快速适应和重新呈现。我们一直支持 Wijmo 的全球化，但在某些情况下无法在运行时切换文化。

为了完全支持这一点，增加了changeCultureAPI，允许您在运行时切换文化，这将使组件可以根据需要重新呈现以反映新的文化。

可以更改 FlexGrid 空编辑后的行为方式

FlexGrid 在某些情况下会在编辑空单元格但未更改时触发更改事件。例如，一个绑定到空值的单元格，如果被编辑和提交，就会变成一个空字符串。您现在可以通过设置新的布尔值 commitEmptyEdits 来更改此行为。默认情况下，它是 true，但您可以将其设置为 false，这将阻止提交空编辑（如果单元格进入编辑模式但未输入新值，则保留现有的 null、NaN、空字符串和未定义值)。

V2022.0 Update2

支持 Angular 14

用于 MAUI 的 FlexGrid 预览版

Wijmo V2022.0 Update2 中支持 Angular 14！从 AngularJS 开始，Wijmo 就一直支持 Angular。我们致力于为 Angular 开发人员提供用于构建企业级应用程序的强大工具集。

Wijmo 提供了大量快速、灵活的 Angular 组件，每个组件都有丰富的声明性标记。我们评价最高的 Angular 网格组件flexgrid 包括了排序、分组、搜索、类似 Excel 的过滤、DataMaps、自定义 CellTemplates、迷你图、丰富的编辑、Excel / PDF 导出、验证、DetailRows 等功能。

支持 React 18

用于 MAUI 的 FlexGrid 预览版

此版本也支持 React 18。React 18 带来了并发渲染和新的 startTransition。所有 Wijmo 组件都已更新以支持 React 18，包括新的渲染模型。这包括诸如 FlexGrid 中丰富的单元格模板之类的特性！

Wijmo 提供了一组功能强大的带有声明性标记的React 组件，包括 FlexGrid，这是用于企业应用程序开发的最佳 React 网格组件。

辅助功能改进

感谢来自客户的反馈，让我们也对 Wijmo 的可访问性做了一些不错的改进。

1、为屏幕阅读器用户向网格组件中添加字幕

使用表格时的一种常见做法是添加标题来描述表格中显示的内容。同样的做法也可以应用于 ARIA 网格组件。

为了使这变得简单，我们向 FlexGrid 添加了一个新的 ariaLabel 属性。现在您可以将该属性设置为您希望屏幕阅读器显示为 DataGrid 标题的内容。每个网格都可以有自己的 ariaLabel 设置。

例子：

    
var myGrid = new FlexGrid("#gridElement");
myGrid.ariaLabel = "Product Sales";

注意：屏幕阅读器可以读出关于 FlexGrid 的信息（如列、行、排序等），所以您不需要在标题中添加这些信息。

2、辅助功能的更多改进

FlexGrid 中的行分组功能可以显示展开/折叠状态
组标题不再呈现 aria-required 属性
DataMap 现在使用与鼠标相同的键盘操作（按回车键关闭下拉菜单）

FlexChart 可滚动图例

对于包含很多个系列的图表，您现在可以在图例上提供滚动条。我们添加了 legend.scrollbar(boolean)属性来启用此功能。

更多 FlexChart 改进

添加了用于自定义标签尺寸的 labelMin 和 labelMax 属性
添加了 saveSvgToDataUrl() 和 saveSvgToFile() 方法来优化导出选项

V2021.0 Update1

加入同时兼容 Angular、React 和 Vue 的可视化地图组件

WijmoJS 在本次更新中，加入了一款用于地理数据可视化展示的地图组件 FlexMap，该组件可以使您的地理数据栩栩如生，并变得更易于分析。目前， FlexMap 组件还处于测试阶段，后续会持续优化并添加一些地图包（区域地图文件）。

FlexMap 组件功能支持渲染色度和为地图添加标注点，如散点图和气泡图，组件使用 GeoJSON 绑定地理要素图层和点图层（建议将 NaturalEarthData 用作 GeoJSON 数据的源，并根据需要自定义 MapShaper）。

如下是 FlexMap 组件的部分使用场景：

1. 在 JavaScript、Angular、React和 Vue 中创建分级统计地图

借助 FlexMap，只需几行代码就可以轻松创建分级统计地图。分级统计地图用于显示地理区域的统计值，每个区域都会根据其表示的数据进行着色。

2. 在JavaScript、Angular、React和Vue中创建散点图

FlexMap 支持为地图添加兴趣点，以及创建散点图。散点图用于显示地图上特定坐标处的兴趣点。

3. 在 JavaScript、Angular、React 和 Vue 中创建气泡地图

FlexMap 可用于创建气泡地图。气泡图在地图上显示的气泡大小取决于数据的值（较大的值=较大的气泡）。

新的图表动态调色板

WijmoJS 的第二个新功能是图表动态调色板，用于在地图和图表中创建漂亮的分级统计地图。

调色板的配色方案参考了专业配色网站，包括以下几种：

顺序（SequentialSingle 和 SequentialMulti）：按颜色深浅显示数据从低到高的顺序，从低值到高值依次以深色到浅色表示。
发散：两端为深色，中端为浅色，浅色表示中间值，深色代表极低值和极高值。
定性：最适合显示名义或分类数据。颜色不表示值的差异。

利用这些新的调色板可以创建非常美观的图表。

用于绑定 REST API 的 RestCollectionView 组件

WijmoJS 的第三个新功能是一款 RestCollectionView 组件，该组件用于绑定 REST API。

要使用这个组件，您只需创建一个扩展 RestCollectionView 并重写以下方法：

getItems从服务器获取项目列表。该列表可以被排序，过滤和分页。
addItem将一个项目添加到服务器上的集合中。
patchItem在服务器上编辑集合中的项目。
deleteItem从服务器上的集合中删除一个项目。

在默认情况下，排序、分页和筛选是在服务器上完成的，但是借助 WijmoJS ，便可以在客户端上更改其中的任何设置，将自定义的 RestCollectionView 绑定到 WijmoJS 组件中，便可自动调用服务器以执行 CRUD 操作。

可用于 Angular、React 和 Vue 的 MultiRow 单元格模板

WijmoJS 的最后一个新功能是可用于 Angular、React 和 Vue 的单元格模板，使用该模板来标记定义 MultiRow 单元格中的自定义内容。单元格模板支持绑定语法、嵌套组件、自定义 HTML 和条件逻辑。

V2020.0 Update2

兼容 Angular 10 和 Vue 3

即便 Angular 10 才发布不久，WijmoJS 已与其全面兼容。WijmoJS 启用了 ESM，可与 Angular 编译器无缝协作，并在该框架中大幅提升产品性能。

WijmoJS 提供了 ESModules，用以构建更灵巧的 Web 程序。编译器将删除所有未使用的模块，仅编译实际运行的 JS。经测试，在启用 ESM 并升级到 Angular 10 之后，WijmoJS 应用程序包的大小减少了 40％左右。

除了 Angular 10， WijmoJS 适用于 Vue 2 的软件包同样可与 Vue 3 兼容。

加入适用于 Angular、React 和 Vue 的条形码组件

WijmoJS 添加了新的条形码组件，用来创建从 QR 到 UPC 的 26 种条形码。WijmoJS 的条形码完全用 JavaScript 呈现，不需要任何服务端依赖。

FlexGrid 中的自定义编辑器

FlexGrid 是一款类似于 Excel 的表格组件，为了给用户提供更丰富的表格编辑体验，WijmoJS 加入了全新的自定义编辑器。

使用编辑器，您可以在 FlexGrid 表格的任意单元格中嵌入 WijmoJS 组件，该组件包括日期选择器、数字文本框、自动录入组件和颜色选择器等。

下图是默认的编辑器（仅为一个简单的文本框）：

下图为使用了 InputDate 的自定义编辑器（日期选择器）：

合理使用 FlexGrid 的自定义编辑器，就可以真正改善在网格中编辑数据时的用户体验。

PDF 安全性

WijmoJS 引入了新的 wijmo.pdf.security 模块，可用于保护 PDF 文件，如指定单独的用户密码和所有者密码。

借助该模块，还可以定义 PDF 文档的权限，包括：

注解
内容访问权限
复制
文件组装
表格填报元素
修改
打印

新组件：TransposedMultiRow（垂直转置）

MultiRow（多行网格）和 “转置视图”在某些场景下非常实用。本次更新，WijmoJS 加入了全新的 TransposedMultiRow 组件，用于像传统网格一样在垂直方向上显示重复记录数据。

MultiRow 的示例：

TransposedMultiRow 的示例（数据与上图相同）：

V2020.0 Update1

为 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 批量更新）

V2019.0 Update3

与时俱进！WijmoJS 将支持 Angular 9 和 Ivy 编译器

每当 Angular 发布最新版本，WijmoJS 必定第一时间与之兼容！

本次发布，WijmoJS 将支持 Angular v9.0.0-rc.2 版本，并与最新的 Ivy Compiler 兼容。

开发者在使用 WijmoJS 的时候，完全不必考虑其在 Angular 框架下的兼容性问题，因为 Angular 技术团队在模块打包时，就已经为我们提供了一些建议，并帮助我们对编译器进行了优化。

正是在 Angular 和 WijmoJS 技术团队的共同努力下，开发者才可以更快的使用 Ivy Compiler 构建企业级 Web 应用程序。

扩展阅读：《Ivy Compiler 是什么？》

一流的框架集成：WijmoJS 针对 Vue 的更新

FlexGrid 单元格模板

单元格模板是 FlexGrid 组件在 Angular 框架下最受欢迎的功能之一。现在，WijmoJS 分别针对 Vue 和 React 框架，提供了这个强大的功能。

单元格模板适用于在表格组件（Grid）的任何单元格中声明标记、表达式和自定义内容。

<wj-flex-grid-column header="Country" binding="country" width="*"> <wj-flex-grid-cell-template cellType="Cell" v-if="customCell" v-slot="cell"> <img :src="'resources/' + cell.item.country + '.png'" /> </wj-flex-grid-cell-template> </wj-flex-grid-column>

进一步了解：《FlexGrid的Vue单元格模板》

针对 Vue 组件的双向绑定

双向绑定在 Vue 中是一种强大的机制，可用于简化表单填报的实现步骤，Vue 提供了两种用于声明双向绑定的语法：v-model 指令和 sync 绑定修饰符。

在 WijmoJS 的输入组件中，已支持上述两种双向绑定语法，因此您可以根据项目需要在它们之间进行选择。

一流的框架集成：WijmoJS 针对 React 的更新

就像在 Angular 和 Vue 中一样，您同样可以在 React 中使用 FlexGrid 的单元格模板，这些单元格模板允许您向 React 数据表中的任何单元格添加自定义内容。

单元格模板功能，使自定义 FlexGrid 中的任何单元格都变得非常容易。

仍以下面这些国家/地区列中呈现标志图像的示例为例：

<wjGrid.FlexGridColumn header="Country" binding="country" width="*"> <wjGrid.FlexGridCellTemplate cellType="Cell" template=(context) => { return <React.Fragment> <img src={`resources/${context.item.country}.png`} /> {context.item.country} </React.Fragment> } /> </wjGrid.FlexGridColumn>

如您所见，“单元格模板”中的可定义内容，包含了标记、HTML 语法，甚至可以绑定其他组件。

进一步了解：《FlexGrid的React单元格模板》

面向原生 JavaScript 的 FlexGrid 单元格模板

除了Angular、React 和 Vue 框架，WijmoJS 针对纯 JavaScript 的 FlexGrid 组件也同样添加了新的单元格模板。如今，WijmoJS 的 Column 类具备了一个全新属性—— cellTemplate，该属性允许自定义渲染单元格，而无需借助 formatItem 事件。

Column.cellTemplates的使用，比在 Angular、React 或 Vue 中使用单元格模板还要简单。仅需声明模板字符串，就可以在其中放置 HTML 元素，甚至绑定表达式，而这些表达式将由 WijmoJS 的 glbz 方法解析并呈现在单元格中。

同样是 “国家/地区”列中呈现标志图像的示例代码，相比于 Vue 和 React 框架，更加清爽、简单：

<pre> columns:[{ header:'Country', binding:'country', width:'*', cellTemplate:'<img src="resources/${item.country}.png"/> ${text}' }] </pre>

针对表格组件（FlexGrid）的更新

FlexGrid 多列排序

FlexGrid 依赖于 CollectionView 类对数据进行排序。此前，WijmoJS 表格组件中的 allowSorting 属性是一个布尔值，它用来确保用户是否可以通过单击单元格的标题来对列进行排序，该属性的机制仅允许用户同时对单个列进行排序。

在 WijmoJS 的新版本中，allowSorting 属性被扩展为以下属性的集合（不单单是布尔类型）：

AllowSorting.None：用户无法通过单击列标题来对列进行排序，这与在先前版本中将 allowSorting 设置为 false 的表现相同。
AllowSorting.SingleColumn：用户可以对单个列进行排序。单击列标题可对该列进行排序或翻转排序的方向（升序、降序）。使用 Ctrl + Click 即可删除排序，这与在先前版本中将 allowSorting 设置为 true 的表现相同。
AllowSorting.MultiColumn：用户可以对多列进行排序。单击列标题可对该列进行排序或翻转排序的方向（升序、降序）。使用 Ctrl + Click 即可删除该列的排序， Ctrl + Shift + Click ，即可删除所有排序状态。

在多列排序时，列标题旁边的箭头显示了当前列的排序顺序：

FlexGrid 冻结列

FlexGrid 支持通过代码冻结行和列，但在此之前，从未公布过用于控制此功能的 UI。

在本次更新中，WijmoJS 添加了 allowPinning 属性，该属性可将图钉（pin 字形）添加到列标题中，通过单击图钉可实现冻结或取消冻结列：

FlexGrid 全文搜索

FlexGrid 支持使用 FlexGridFilter 组件，实现基于列的类似 Excel 那样的过滤方式。

在本次更新中，WijmoJS 添加了全新的 WijmoJS.grid.search 模块，该模块带有一个 FlexGridSearch 控件，该控件提供了全文本搜索/过滤器界面。
当用户在 FlexGridSearch 控件键入数据时，它将根据搜索文本过滤项目，自动突出显示匹配项，已达到全文搜索的目的：

如上图所示，FlexGridSearch 控件可以与 FlexGridFilter 组件一起使用。

转置表格

在常规表格中，同一项目在一行内显示，项目的属性在同一列中显示。

而在转置表格中，每个项目变成由同一列来表示，行显示的是项目属性。

为了实现上述需求，WijmoJS 添加了一个带有 TransposedGrid 控件的模块 —— Wijmo.grid.transposed，其中数据项目显示为列，其属性显示为行。

即便此前我们已经可以通过 FlexGrid 的 API 创建类似的转置视图，但通过 TransposedGrid 控件，将使这项工作变得更加容易。

保存 CSV 文件

FlexGrid 支持将表格中的数据保存为其他格式，如 CSV。

在本次更新中，WijmoJS 添加了两个功能，使保存 CSV 文件变得更加轻松：

在 WijmoJS 中添加了 saveFile 方法，可以直接通过该方法保存 CSV 文件，而不必一遍又一遍地复制相同的代码。
表格组件（Grid）的 getClipString 方法现在加入了一个 options 参数，该参数使您可以精确地指定生成剪辑字符串的方式。

通过上述更改，您可以使用两行代码保存 CSV 文件：

get clip string (current selection, with column headers) const clipString = grid.getClipString(null, options, true, false); // save to a file saveFile(clipString,'flexgrid.csv');

也可以通过 ClipStringOptions 属性完成更多功能：

ClipStringOptions.Default：使用默认选项（制表符作为单元格分隔符，带格式的/可见的/未引用的单元格），执行复制/粘贴到剪贴板时内部使用的格式。
ClipStringOptions.CSV：使用逗号作为单元格分隔符（CSV 格式），这也是导出 CSV 文件时的默认格式。
ClipStringOptions.QuoteAll：引用所有单元格，将所有单元格都用引号引起来，而不是仅对包含逗号和引号的单元格，这项改动将使输出文件更易于解析。
ClipStringOptions.SkipMerged：跳过已合并的单元格（如 Excel 一般）。在某些情况下，这使得输出文件更易于阅读。
ClipStringOptions.Unformatted：导出未格式化的值。与仅保存格式化的值相反，此格式保留了数值的全部精度。
ClipStringOptions.InvisibleRows：在输出中包括不可见和折叠的行（默认情况下，不包括不可见和折叠的行）。
ClipStringOptions.InvisibleColumns：在输出中包括不可见的列（默认情况下，不包括不可见列）。
ClipStringOptions.InvisibleCells：在输出中包括不可见的单元格。

WijmoJS 更多增强点：

将信息提示添加到了 “any”类型的多个回调函数和属性中。
向事件类的发送方和参数添加了通用类型。
为 CollectionView 和 ObservableArray 类添加了通用类型，可通过以下代码实例化 Customer 对象：var cv = new CollectionView（data）; var customer = cv.currentItem; // customer是Customer的一个实例
提供了编译时错误检查和 IntelliSense，确保开发者可以更快地编写更好的代码。

V2019.0 Update2

React 框架下 WijmoJS 组件功能增强

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

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

详细了解《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 中性能调优 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）

V2019.0 Update1

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

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

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

希望 WijmoJS 的在线 Demo 系统，能让您的开发变的更加轻松。同时，也欢迎您向 WijmoJS 的 Demo 系统推荐您认为有用的功能代码，葡萄城技术团队会将其添加到在线 Demo 系统中。

WijmoJS 在线 Demo示例

葡萄城技术团队希望 WijmoJS 使用起来尽可能简单。为了体现这一点，我们重新编写了200多个全新的文档指南，这些指南将在您的使用过程中给予帮助。同时，该文档还提供全文搜索功能，您可快速找到需要查看的内容。

WijmoJS 产品文档

葡萄城技术团队重新构建了 WijmoJS 的 API 参考，与在线 Demo 示例和文档指南保持统一的样式。

WijmoJS API 参考

表格控件 FlexGrid 的新增功能

错误提示（errorTip）

表格控件 FlexGrid 中新增错误提示（errorTip），用于在验证错误时显示提示信息。同时，用户还可以针对此功能进行自定义扩展，或将其设置为空（null）。该功能的效果如下图：

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

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

重构并简化了 FlexGrid 的 CSS 规则

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

请注意，为了使 wj-cell 类更弱、更易于样式化，我们必须使其他一些类更强，如：wj-header和wj-alt。您可能需要调整 CSS 以使用组合类选择器，如.wj-cell.wj-header

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

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

数据分析 OLAP 的新增功能

大纲视图

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

图表控件 FlexChart 的新增功能

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

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

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

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

FlexChart 中新增区域面积图表

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

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

FlexPie 多饼图

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

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

其他功能：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 系统的布局样式是否适应它们的容器。

V2018.0 Update3

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

数据切片器：OLAP 的 Slicer 控件

WijmoJS 在最新版本的 OLAP 模块中添加了一个 Slicer 控件。 Slicer 控件提供了一种快速编辑应用于 PivotField 对象的过滤器的方法。它允许用户可以单击以预留值过滤数据的按钮，并指示当前的过滤状态。这项改进使您可以更容易地查看经过 PivotGrid 过滤和数据透视图控件中显示的内容。

为 OLAP 增加“详细信息对话框” API

WijmoJS PivotGrid 允许您点击单元格查看用于计算每个摘要的数据项。除此之外，还可以通过调用网格控件的 showDetail 属性并传递单元格的坐标来调用详细信息对话框。

上面就是 WijmoJS 网格控件通过 detailDialog 属性打开的详细信息对话框，该属性也可用于自定义对话框。

OLAP 中的计算字段

WijmoJS 向 OLAP 添加了一个 PivotField.getValue 属性，允许用户指定用于检索给定项的字段值的自定义函数。您可以使用它来实现计算字段，例如'binning'（例如 Value => large / medium / small）或计算表达式（例如 Conversion => downloads / sales）。

WijmoJS 全面支持 Angular 7

WijmoJS 拥有一流的 Angular 支持。随着最新版 Angular 7 的发布，您已经可以使用 2018 V3 版本的 WijmoJS 来构建 Angular 7 应用程序了。点击此处，查看《WijmoJS 全面支持Angular 7》的技术博客。

使用 Web Workers 让前端 PDF 导出效率更高效

做过前端开发的应该都深有体会，PDF 导出通常会降低 Web 应用程序的速度，这是由于导出发生在浏览器的 UI 线程中，导致应用程序的其余部分无法使用。WijmoJS 的 Web Workers 则完美地解决了 PDF 导出缓慢的问题。 WijmoJS 使用 Web Workers 在单独的线程上导出PDF文件，最大程度保证应用程序的正常运行，并支持“后台”导出操作。Web Workers功能已经可以在 WijmoJS 的PDF模块中使用。点击此处，查看《WijmoJS Web Workers》的技术博客。

ComboBox / ListBox中增加分组表头属性

WijmoJS 添加了一个 showGroups 属性，通过使用该属性将分组组头添加到 ListBox 和 ComboBox 控件。如果 showGroups 属性设置为 true 且 itemsSource 集合已启用分组，则会添加组标题项。

全新示例：基于 TabPanel 的 Ribbon 主题

WijmoJS 添加了一个全新的功能区主题示例，显示了如何使用 TabPanel 控件和 WijmoJS 输入模块中的控件轻松创建Ribbons。示例功能区元素基于TabPanel。选项卡页面包含按行和列组合的控件组。组中的控件使用“Material icons”，并根据分配给每个控件的aria-label属性自动创建工具提示。点击此处，查看《WijmoJS Ribbon 主题示例的技术博客》的技术博客。

OLAP 功能增强

数据切片器：OLAP 的 Slicer 控件

为 OLAP 增加“详细信息对话框” API

上面就是 WijmoJS 网格控件通过 detailDialog 属性打开的详细信息对话框，该属性也可用于自定义对话框。

OLAP 中的计算字段

新功能：日历选择器

WijmoJS 在 Calendar 和 InputDate 控件中添加了一个小但有用的功能。您现在可以单击年份标题打开日历选择器，这样您就可以更轻松地跳转到不同的年份。这个小小的改进可以在选择日期时为最终用户节省一些时间。

Menu 菜单支持向下扩展子菜单

WijmoJS 之前收到了一个客户的请求：为 Menu 控件添加向下扩展子菜单的功能，这样可以帮助最终用户创建更复杂的菜单和上下文菜单。WijmoJS 在新版本中增加了这个功能，并且还添加了一个在悬停时打开菜单的选项。

更新日志

使用 Web Workers 添加了对 FlexGrid pdf 导出的支持。有关详细信息，请参阅 PdfWebWorkersClient 和 PdfWeb Workers。 AngularJS PdfExport 示例添加了 Web Workers 示例以演示该功能。
WijmoJS 完全支持 Angular 7。
【WebComponents】添加了 WebComponents 互操作的 Beta 版本（wijmo.webcomponents.xxx.js 模块）。 Samples \ TS \ WebComponents \ WebComponentsIntro 示例说明了互操作的状态和用法。
【NPM】WijmoJS 作为'wijmo'包发布到全局 npm 注册表。
添加了 GroupPanel.filter 属性，允许您指定在网格上使用的 FlexGridFilter。完成后，组面板将在组标题上显示过滤器字形。单击过滤器字形将打开相应列的过滤器编辑器。
添加了一个 PivotGrid.detailDialog 属性，该属性返回对网格的 DetailDialog 控件的引用，该控件用于在用户双击单元格时显示详细记录。
在 Calendar 和 InputDate 控件中添加了 repeatButtons 属性，这会导致在按下按钮时重复触发日历按钮。（这类似于 InputNumber.repeatButtons 属性）。
向 Calenda r和 InputDate 控件添加了 showYearPicker 属性，使日历显示用户单击年日历标题时的年份列表。
添加了 PivotField.getValue 属性，该属性允许您指定用于检索给定项的字段值的自定义函数。这可用于实现可用于“分箱”的计算字段（例如，值=>大/中/小，国家=> A / B / C /其他）或任何计算的表达式（例如，转换=>销售/下载）。
向 ListBox 和 ComboBox 控件添加了 showGroups 属性。这会将组标题元素添加到具有分组项目源的列表中。例如：https：//jsfiddle.net/Wijmo5/sy7u9rn6/（它类似于 FlexGrid 控件中的 showGroups 属性）。
优化的 ListBox 加载性能（特别是在 IE / Edge 中）。
【FlexSheet】添加了允许用户禁用拖动单元格范围的选项。向 FlexSheet 添加了“enableDragDrop”属性。（TFS 342191）
【FlexSheet】在 FlexSheet 中禁用公式。在 FlexSheet 中添加“enableFormulas”属性。（TFS 341806）
添加了一个新的 wijmo.olap.Slicer 控件，可以提供简单的基于值的过滤。这类似于 Excel 的数据透视表中的 Slicer 控件。例如： https://jsfiddle.net/Wijmo5/3p8rcuqe/
添加了一个新的 wijmo.olap.PivotField.visible 属性，允许开发人员隐藏某些字段，使它们不会出现在 PivotPanel 控件中（因此无法从视图定义中删除或移动）。
【功能增强】FlexSheet 单击并拖动单元格角以填充数据。（TFS 229151）
扩展了文档以包含多个控件上的多个属性的缺少默认值。
【功能增强】FlexSheet 支持 INDIRECT 和 ADDRESS 公式。（TFS 337828）

V2018.0 Update2

全新的可视化设计器

目前为止，WijmoJS 纯前端控件集已经十分易于前端开发使用，但仍需要编写代码。WijmoJS 2018V2 宣布，这种方式将被彻底改变。用于创建和自定义WijmoJS控件的设计器，包含两个beta版本，一个是与Visual Studio Code完美融合的设计器、另一个则是可视化在线设计器，提供实时预览和编辑页面属性的功能。

VSCode设计器用于自定义Angular 框架下WijmoJS 组件

可视化在线设计器用于创建和自定义wijmoJS 控件

VSCode设计器

此设计器是 VSCode 的扩展。安装后，它会在每个 Angular 框架下的 WijmoJS 组件上方添加“Wijmo Designer ...”操作。单击操作按钮后，它将打开一个设计界面，用于自定义该特定组件。开发人员可以实时更改属性和绑定事件，并将所做更改保存回 Angular 应用程序中。

要在 VSCode 中安装此扩展，请单击 VS Marketplace上Designer 设置中的“安装”按钮。

此外，您还可以在 VSCode 的扩展管理器中搜索“wijmo”并从那里安装。

确保安装后重新加载 VSCode。然后打开一个使用 WijmoJS 控件的 Angular 应用程序并尝试启动设计器。

可视化在线设计器

此设计器是用于创建和自定义 WijmoJS 控件的 Web 应用程序。您可以在任何浏览器中运行此设计器。它允许您将控件添加到设计图面，然后根据自己的喜好自定义它们。完成后，您可以将生成的代码复制到您自己的应用程序中。

可视化在线设计器

Web-based Wijmo Designer

此设计器生成的代码是纯 HTML 和 JavaScript。生成的代码包括初始化控件所需的引用，宿主元素和 JavaScript 脚本。

支持 Angular 6 和 TypeScript 2.7

WijmoJS 已经全面支持Angular 6.0.0版。现阶段工作是将所有Demo示例升级到Angular V6，并将TypeScript版本升级到V2.7。

新的 React / Redux 加密货币跟踪应用程序

WijmoJS 为使用 React 和 Redux 的用户增加了加密货币跟踪应用程序，该应用程序是一个财务仪表板，可用于跟踪加密货币值，这些值是在用户开发的生产应用程序之后建模的。使用 React / Redux 的现代设计模式和各种 WijmoJS 控件，可以帮助您更好地评估和开发 WijmoJS 应用程序。

Wijmo Crypto Currency App

支持 Vue V2 的集成增强功能

随着 Vue 的不断发展，WijmoJS 也正在不断改进，以增强在 Vue 中的易用性。本次更新中增加了对 Vue V2 的很多不错的功能。比如，WijmoJS 子组件现在可以在动态场景中正确工作，例如 v-for 和 v-if 指令。

支持 Vue V2 的集成增强功能

Child components in Vue.js

此外，还添加了 WjFlexGridDetail 等组件，并添加了一些新的示例。点击查看 Vue 2 AllComponents sample。

WijmoJS 中的 Web Components

WijmoJS 的 Web组件互操作的测试版已经推出，它将 WijmoJS 控件公开为 Web组件，更具体地说是自定义元素。 WijmoJS Web组件允许您以声明方式将 WijmoJS 控件添加到 HTML 页面，并将其作为常用 DOM 元素进行操作，而无需使用任何其他框架。某些不完全支持 Web组件标准的浏览器可能需要一些额外的 Polyfill 支持。

WijmoJS 中的Web Components

如果您不熟悉 Web组件，请参考这篇博客。

WijmoJS Web组件实现当前状态的关键点：

1、WijmoJS 控件的WijmoJS“顶级”Web组件（如表示 FlexGrid 控件的 wjc-flex-grid 组件）继承自相应的控件类。例如，WjcFlexGrid 组件类扩展了 FlexGrid 控件类。这也意味着当 WijmoJS 用于“Web组件模式”时，基础 WijmoJS 控件类扩展了 HTML 元素类。

2、与顶级组件互补的子组件，如定义 FlexGrid 列的 wjc-flex-grid-column 组件，作为它们所代表的 WijmoJS 类的包装器。子组件直接从 HTMLElementclass 继承，底层 WijmoJS 类实例可通过组件的特殊控件属性访问。

3、可以使用组件元素上的属性定义 WijmoJS 类属性。当属性值更改时，相应的 WijmoJS 类属性会相应更新。目前，更改类属性值不需要更改相应的属性值。

4、JavaScript 代码可以使用本机 Element.addEventListener（'event'，handler）方法为 WijmoJS 控件事件订阅处理程序。

5、WijmoJS 组件现在不使用 Shadow DOM。这将在互操作的未来版本中得到解决。最大的挑战是 WijmoJS 允许通过 CSS 对其控件的部件进行深度定制，而 Shadow DOM 的目标是防止它。有关 Shadow DOM 规范的新提议可以缓解此限制，我们正在密切关注这些更改。目前，WijmoJS Web组件及其部件可以使用全局 CSS 以与普通 WijmoJS 控件相同的方式进行自定义。

Web组件的最大好处是，可以在不同的框架中使用相同的组件，并从框架的附加功能（如属性，属性和事件绑定）中受益。

目前，我们添加了 Web Components In Angular 示例，演示了如何在 Angular 应用程序中使用 WijmoJS Web组件。其他流行框架（如React，Vue，Polymer等）的示例正在开发中。（如有需要，请及时联系我们）

SASS 支持的控件和主题

WijmoJS 的控件样式（布局，默认样式）以前是用CSS编写的。最初，它很简单，但目前已经发展到难以管理的程度。因此，现在决定使用SASS和更好的方式来重写样式。

您可以轻松使用 SASS 文件来创建自己的主题风格。WijmoJS 还提供 SASS 文件供您使用和自定义。
您现在可以选择要包含在应用程序中的 SASS 模块。例如，现在有一个仅包含核心模块（非企业）的 WijmoJS-Core 文件，它只是全部 CSS 文件的一小部分。您可以有选择地使用要包含的模块来真正优化 CSS 大小。
WijmoJS 在 Web Component interop 中增加了对 Shadow DOM 的支持。
希望通过这些改进，为通过纯前端控件集 WijmoJS 开发的 Web 应用程序更易使用，更加轻盈。

ES6 和 ESModule 支持

本次更新，增加了 ES6 版本的 WijmoJS 模块（测试版），你可以在 WijmoJS 安装包的 NpmImages 文件夹中找到它：

wijmo-es2015-esm-min - ESM模块格式（ES6导入/导出语句）
wijmo-es2015-commonjs-min - 采用CommonJS模块格式

更新日志

【WebComponents】添加了WebComponents互操作的Beta版本（wijmo.webcomponents.xxx.js模块）。 Samples \ TS \ WebComponents \ WebComponentsIntro示例说明了互操作的状态和用法。
【npm】 WijmoJS作为'wijmo'包发布到全局npm注册表。
【WebComponents】添加了AllComponents示例，其中包括所有主要支持的组件。
添加了基于Web的WijmoJS 在线设计器，使用类似Visual Studio的属性网格和设计界面，提供基于 Web 的WijmoJS Designer PureJS控件。
添加了VSCode WijmoJS Designer扩展，使用类似Visual Studio的属性网格和设计界面。
Wijmo CSS文件现在可使用Sass实现。
【React / Redux】添加了React / Redux CryptoCurrencyTracking示例。
【ES6】版本462的WijmoJS ES6 npm图像（NpmImages中的wijmo-es2015-commonjs-min和wijmo-es2015-esm-min文件夹）被批准为发布版本。
【a11y】添加了一个wj-state-focus类选择器，它补充了以wj-state为中心的选择器。 wj-state-focus选择器获取具有焦点的WijmoJS控件。 wj-state-focused选择器获取包含焦点的所有WijmoJS控件。例如，如果嵌套了WijmoJS控件A，B和C，并且控件C包含活动元素，则.wj-state-focus将选择C，而.wj-state-focused将选择A，B和C. wj-state-focus选择器可用于在CSS中实现焦点轮廓。例如：

  .wj-state-focus, a:focus, button:not(.wj-btn-default):focus, input:not(.wj-form-control):focus,  input【type=checkbox】:focus {  box-shadow: 0px 0px 17px 0px rgb(41,173,68);}

其他更新

【NPM】“themes”文件夹现在是“styles”文件夹的子项。以前是“Styles”的同级目录。
新的基于Sass的CSS文件包含一些比原始CSS更具体的规则，因此如果您有自定义CSS文件，则可能需要调整其规则。
新的CSS文件有关于颜色，填充等的更一致的规则，因此您在升级时可能会看到一些小的更改。例如，我们在ListBox，FlexGrid，Calendar等中使项目填充一致。
新的基于Sass的主题文件是自包含的，不需要您再将基本wijmo.css文件添加到页面。这意味着对包含主题控件的页面的HTTP请求减少了一个。这不是一个突破性的变化，而是一个提高性能的机会。
将AutoComplete.isContentHtml属性的默认值从true更改为false。这不应该影响大多数应用程序，新的默认值可以防止非自愿的脚本/ html注入。如果它确实会影响您的应用程序，请将AutoComplete.isContentHtml属性设置为true，您将获得原始行为。

V2018.0 Update1

引入新的 License 许可机制，提高用户程序的安全性

为了保护用户所发布程序的安全性，WijmoJS 实施了部署加密，以防止您的源码被窃取。用户只需要在购买的时候提交需要部署的域名信息，葡萄城技术团队会将生成好的授权密钥一并发送给您，用户部署到服务器时, 需要为使用 WijmoJS 的应用程序生成部署授权密钥，以便正常使用 WijmoJS 控件，并且保护用户产品的版权。您还可以将密钥应用到您的系统中，用来实施产品加密。

WijmoJS 在本地主机上（localhost）不需要应用密钥，因此您的开发过程将不会中断。您只需在将应用程序部署到服务器时生成并应用密钥。

如果您在没有分配密钥的情况下部署 WijmoJS 应用程序，则会看到以下弹出窗口：

在您的产品或者项目中使用 WijmoJS 需要以下几个步骤：

Step1：购买 WijmoJS 产品
Step2：发给您需要授权的域名给我们，获取部署授权密钥
Step3：在您的产品或者项目中使用我们生成的部署授权，方法如下：

Example:

Wijmo.setlicenseKey(key);

注意：我们过去发布了两个版本的 WijmoJS，一个是用于评估试用，一个用于正式开发。我们现在只需一个版本就可以可以运行在两种模式下（试用或正式开发），所以在开发时不再需要替换 WijmoJS 文件。

WijmoJS 支持在 Npm 上发布，减少您的系统维护时间和跟踪依赖程度

WijmoJS 之前一直有发布 NpmImages。所有的 Angular v5 的 demo 都使用安装 NpmImage 来作为 WijmoJS 的模块，此外还有一种方式是教您从本地文件系统安装 WijmoJS。目前的好消息就是，如果您使用了这两种模式中的一种，则可以轻松转移到 NPM。

唯一需要更改的是去除 package.json 中指向我们的服务器的自定义 URL，并添加要使用的特定版本的 WijmoJS：

Old (hosted):

"dependencies":{
    "@angular/common":"^5.0.0",
    ...
    "Wijmo":"http://prerelease.componentone.com/Wijmo5/npm-images/C1Wijmo-Enterprise-Eval-CommonJs-5.20173.409.tgz",
    "zone.js":"^0.8.18"
},

Old (local):

"dependencies":{
    "@angular/common":"^5.0.0",
    ...
    "Wijmo":" ../Wijmo_download/NpmImages/Wijmo-commonjs-min",
    "zone.js":"^0.8.18"
},

New:

"dependencies":{
    "@angular/common":"^5.0.0",
    ...
    "Wijmo":"5.20181.450",
    "zone.js":"^0.8.18"
},

安装 WijmoJS 的 npm 命令如下：

npm install Wijmo

@import 语句也是一样的：

import * as wjcGrid from 'Wijmo/Wijmo.grid';

这就是新版本的 WijmoJS,希望您能接受 WijmoJS 对于目前主流 web app 开发框架的更新。

关于用 npm 生成一个 WijmoJS 的 web app 博客教程

新控件：智能的 TabPanel 选项卡控件

根据 WijmoJS 用户反馈，新增选项卡控件，使用户可以在不同选项之间进行切换。

WijmoJS 的 TabPanel 控件最大的优势是其高度智能化：在切换标签时自动刷新 WijmoJS 控件。之前，由于控件在呈现时需要在屏幕上可见（用于计算尺寸），因此其他选项卡控件会强制您手动刷新控件。而现在，对于使用 WijmoJS TabPanel 控件的客户来说，它将自动完成刷新任务，优化了显示风格。

此外，我们从所有示例中删除了 Bootstrap 选项卡，并从所有示例中完全删除了 jQuery，从此你将不再需要依赖任何文件库。

使用 WijmoJS 添加无依赖关系的 JavaScript TabPanel 控件博客教程

OLAP 中的 Microsoft SSAS Cube 支持

WijmoJS OLAP 功能更强大，因为它可以直接连接到 Microsoft SSAS Cubes。以前，WijmoJS OLAP 可以处理客户端聚合，因此它不需要服务器。我们也有一个服务器端聚合的选项，但它需要安装一个定制的 DataEngine。

而现在，WijmoJS OLAP 可以直接与 SSAS Cubes 进行对话。这对于那些拥有现有 SSAS 多维数据集并希望创建直接绑定到多维数据集的 PivotGrid（和数据透视图）的用户非常有用。

此功能要求您在 SSAS 多维数据集中配置一些内容，以确保可以通过 AJAX 请求访问它。阅读我们的博客，了解如何设置 WijmoJS OLAP 和 SSAS 多维数据集。

Olap 集成 SSAS 的博客教程

ReportViewer 中的 ActiveReports 支持

WijmoJS 有了一个支持 ActiveReports 的现代客户端 ReportViewer 控件。 WijmoJS ReportViewer 是作为 TypeScript 中的一个控件编写的，并且内置了对 Angular，React，Vue 等的支持。它也提供多种模块格式供模块加载器使用。这款尖端的 ReportViewer 是对尖端报告引擎的补充。

FlexSheet Tables

WijmoJS 为 FlexSheet 添加了子表格支持。 FlexSheet 中的表格的行为与 Excel 类似; 您可以在工作表中选择一系列单元格并将它们转换为格式化的表格：

React 子组件支持

我们为具有复杂属性的控件添加了子组件支持：例如 FlexGrid Column 对象的 FlexGridColumn 和 Chart Series 对象的 FlexChartSeries。这使得标记中的控件和绑定更加强大。

下面是一个 FlexGrid 的示例，其中列出了标记中声明的列：

<Wj.FlexGriditemsSource={this.state.data}>
    <Wj.FlexGridColumn header={this.state.countryHeader} binding="country" width="*" />
    <Wj.FlexGridColumn header="Date" binding="date" />
    <Wj.FlexGridColumn header="Revenue" binding="amount" format="n0" />
<Wj.FlexGridColumn header="Active" binding="active" />
</Wj.FlexGrid>

HTTPS CDN

展望未来，WijmoJS 的所有新版本都将发布到支持 HTTPS 的新 CDN。 HTTPS 正在成为托管几乎所有网络内容的标准，因此我们希望确保您可以使用 HTTPS 托管您的应用程序，并仍然使用 WijmoJS。它还使 WijmoJS 更易于在 jsfiddle，codepen，jsbin 等网站上使用。

WijmoJS CDN 的新 URL 如下：

<!-- Wijmo references (required) -->
<script src="https://cdn.grapecity.com/Wijmo/5.20181.450/controls/Wijmo.min.js"></script>
<link href="https://cdn.grapecity.com/Wijmo/5.20181.450/styles/Wijmo.min.css" rel="stylesheet"/>
<!-- Wijmo controls (optional, include the controls you need) -->
<script src="https://cdn.grapecity.com/Wijmo/5.20181.450/controls/Wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/Wijmo/5.20181.450/controls/Wijmo.chart.min.js"></script>
<script src="https://cdn.grapecity.com/Wijmo/5.20181.450/controls/Wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/Wijmo/5.20181.450/controls/Wijmo.gauge.min.js"></script>

我们还承载了最新版本，每个正式版本都会更新：

<script src="https://cdn.grapecity.com/Wijmo/5.latest/controls/Wijmo.min.js"></script>
<link href="https://cdn.grapecity.com/Wijmo/5.latest/styles/Wijmo.min.css" rel="stylesheet"/>
<!-- Wijmo controls (optional, include the controls you need) -->
<script src="https://cdn.grapecity.com/Wijmo/5.latest/controls/Wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/Wijmo/5.latest/controls/Wijmo.chart.min.js"></script>
<script src="https://cdn.grapecity.com/Wijmo/5.latest/controls/Wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/Wijmo/5.latest/controls/Wijmo.gauge.min.js"></script>

辅助功能增强

我们致力于在此版本中提供辅助功能并增加更多增强功能。我们改进了无障碍功能:

分层 FlexGrid（带有 ARIA treegrid 属性）
自动完成和组合框
FlexGridFilter 对话框

更新日志

我们致力于在此版本中提供辅助功能并增加更多增强功能。我们改进了无障碍功能:

分层 FlexGrid（带有 ARIA treegrid 属性）
自动完成和组合框
FlexGridFilter 对话框

【许可】添加了一个 WijmoJS.setdistribution 密钥方法，可以启用单一构建部署，包括 npm。如果分配密钥未设置，则 WijmoJS 以评估模式运行（带有水印）。设置分配密钥（密钥提供给我们网站上的客户）导致 WijmoJS 以生产模式运行（无水印）。

【npm】 WijmoJS 作为 'WijmoJS' 软件包发布到全球 npm 注册中心。

安装发布版本

> npm install Wijmo             // latest
> npm install Wijmo@5.20173.431 // specific version

安装 RC 版本

> npm install Wijmo@rc              // latest
> npm install Wijmo@5.20181.432-rc  // specific version

安装每日构建版

> npm install Wijmo@nightly                             // latest
> npm install Wijmo@5.20173.431-nightly.d20180312.t0720 // specific
version (suffix denotes build date/time)

在线 npm 软件包以 CommonJS 格式提供 WijmoJS 模块。与之前一样，替代模块格式在 WijmoJS 下载 zip 的 NpmImages 文件夹中可用。

【npm】 WijmoJS npm 图像现在包含 CSS 样式和文化文件：
'styles'子文件夹中的 Wijmo.css。用法示例：import'Wijmo / style / Wijmo.css';
主题 CSS 在'主题'子文件夹中。用法示例：导入'Wijmo / themes / Wijmo.theme.dark.css';
培养 js 文件在'文化'子文件夹中。用法示例：import'Wijmo / cultures / Wijmo.culture.ja';

【可访问性】改进了 FlexGrid，FlexGridFilter 和 ComboBox 组件上的 ARIA 支持。

【Olap】添加了对将 PivotEngine 组件直接绑定到 SSAS 多维数据集的支持。以前，绑定到 SSAS 多维数据集需要设置一个服务器和暴露多维数据集的 ComponentOne 数据引擎服务。现在，您可以将 PivotEngine 直接绑定到 SSAS 多维数据集。

OLAP 和 SSAS Cube 博客教程

示例：

var ng = new Wijmo.olap.PivotEngine({
    itemsSource:{
        url:'http://ssrs.componentone.com/OLAP/msmdpump.dll',
        cube:'Adventure Works'
    }

【ReportViewer】添加了对 GrapeCity ActiveReports 报告生成器的支持。 PureJS ReportViewer 示例已更新以演示新功能。

添加了一个提供标签导航的 Wijmo.nav.TabPanel 控件。这个新控件可以用来替换 bootstrap 选项卡，它需要 bootstrap.js 和 jQuery。

【React】添加了子组件支持。
React 添加了对代表某些控件属性的复杂对象的子组件的支持，例如 FlexGrid Column 对象的 FlexGridColumn 和 Chart Series 对象的 FlexChartSeries。

所以从现在开始，除此之外，还有如下的静态列定义：

<Wj.FlexGrid autoGenerateColumns={ false }
    columns={[
        { header 'Country' , binding 'country' , width '*' },
        { header 'Date' , binding 'date' },
        { header 'Revenue' , binding 'amount' , format 'n0' },
        { header 'Active' , binding 'active' }
    ]}
    itemsSource={ this.state.data } />

你可以使用下面的动态定义：

<Wj.FlexGrid itemsSource={this.state.data}>
    <Wj.FlexGridColumn header={this.state.countryHeader} binding="country" width="*" />
    <Wj.FlexGridColumn header="Date" binding="date" />
    <Wj.FlexGridColumn header="Revenue" binding="amount" format="n0" />
<Wj.FlexGridColumn header="Active" binding="active" />
</Wj.FlexGrid>

这种改进使得动态更新数组属性项成为可能，例如一组网格列，其中'渲染'代码如下所示：

<Wj.FlexGrid itemsSource={this.state.data}>
    {this.state.columnsDefinitions.map((colDef) => {
        return <Wj.FlexGridColumn key={colDef.binding} binding={colDef.binding} />}
    )}
</Wj.FlexGrid>

【olap.PivotPanel】添加了对非多维数据源中分层字段结构的支持。

【Excel】增加了对 FlexSheet 控件和 Wijmo.xlsx 模块中表格的支持。

【FlexSheet】将 _filter 公开而不是私有属性。

【FlexGrid】添加了支持单元格中多行文本的 Column.multiLine（和 Row.multiLine）功能。将 multiLine 设置为 true 将导致单元格在渲染单元格内容时使用嵌入换行符（\ n）。用户可以通过按 alt + Enter 键来输入换行符，就像在 Excel 中一样。

【FlexGrid】添加了对 Column.textAlign ='justify-all' 的支持。这个新设置明确地设置了 CSS 属性 textAlignLas 和 textJustify，这对基于表意文字的语言比如中文和日文很重要。

【全球化】增加了对日期格式中转义字符的支持，例如
```
wijmo.Globalize.format（date，'\\ h h \\ m m'）; // h 3 m 55
```

更新所有基于 Angular 和 React npm 模块的样本的配置，以支持符号链接模块安装。

添加了一个 FlexGrid.autoScroll 属性，用于确定当用户拖动控件边缘附近的行或列时，网格是否应自动滚动其内容。

V2019.0 Update3

与时俱进！WijmoJS 将支持 Angular 9 和 Ivy 编译器

每当 Angular 发布最新版本，WijmoJS 必定第一时间与之兼容！

本次发布，WijmoJS 将支持 Angular v9.0.0-rc.2 版本，并与最新的 Ivy Compiler 兼容。

正是在 Angular 和 WijmoJS 技术团队的共同努力下，开发者才可以更快的使用 Ivy Compiler 构建企业级 Web 应用程序。

扩展阅读：《Ivy Compiler 是什么？》

一流的框架集成：WijmoJS 针对 Vue 的更新

FlexGrid 单元格模板

单元格模板是 FlexGrid 组件在 Angular 框架下最受欢迎的功能之一。现在，WijmoJS 分别针对 Vue 和 React 框架，提供了这个强大的功能。

单元格模板适用于在表格组件（Grid）的任何单元格中声明标记、表达式和自定义内容。

<wj-flex-grid-column header="Country" binding="country" width="*"> <wj-flex-grid-cell-template cellType="Cell" v-if="customCell" v-slot="cell"> <img :src="'resources/' + cell.item.country + '.png'" /> </wj-flex-grid-cell-template> </wj-flex-grid-column>

进一步了解：《FlexGrid的Vue单元格模板》

针对 Vue 组件的双向绑定

双向绑定在 Vue 中是一种强大的机制，可用于简化表单填报的实现步骤，Vue 提供了两种用于声明双向绑定的语法：v-model 指令和 sync 绑定修饰符。

在 WijmoJS 的输入组件中，已支持上述两种双向绑定语法，因此您可以根据项目需要在它们之间进行选择。

一流的框架集成：WijmoJS 针对 React 的更新

就像在 Angular 和 Vue 中一样，您同样可以在 React 中使用 FlexGrid 的单元格模板，这些单元格模板允许您向 React 数据表中的任何单元格添加自定义内容。

单元格模板功能，使自定义 FlexGrid 中的任何单元格都变得非常容易。

仍以下面这些国家/地区列中呈现标志图像的示例为例：

<wjGrid.FlexGridColumn header="Country" binding="country" width="*"> <wjGrid.FlexGridCellTemplate cellType="Cell" template=(context) => { return <React.Fragment> <img src={`resources/${context.item.country}.png`} /> {context.item.country} </React.Fragment> } /> </wjGrid.FlexGridColumn>

如您所见，“单元格模板”中的可定义内容，包含了标记、HTML 语法，甚至可以绑定其他组件。

进一步了解：《FlexGrid的React单元格模板》

面向原生 JavaScript 的 FlexGrid 单元格模板

同样是 “国家/地区”列中呈现标志图像的示例代码，相比于 Vue 和 React 框架，更加清爽、简单：

<pre> columns:[{ header:'Country', binding:'country', width:'*', cellTemplate:'<img src="resources/${item.country}.png"/> ${text}' }] </pre>

针对表格组件（FlexGrid）的更新

FlexGrid 多列排序

在 WijmoJS 的新版本中，allowSorting 属性被扩展为以下属性的集合（不单单是布尔类型）：

AllowSorting.None：用户无法通过单击列标题来对列进行排序，这与在先前版本中将 allowSorting 设置为 false 的表现相同。
AllowSorting.SingleColumn：用户可以对单个列进行排序。单击列标题可对该列进行排序或翻转排序的方向（升序、降序）。使用 Ctrl + Click 即可删除排序，这与在先前版本中将 allowSorting 设置为 true 的表现相同。
AllowSorting.MultiColumn：用户可以对多列进行排序。单击列标题可对该列进行排序或翻转排序的方向（升序、降序）。使用 Ctrl + Click 即可删除该列的排序， Ctrl + Shift + Click ，即可删除所有排序状态。

在多列排序时，列标题旁边的箭头显示了当前列的排序顺序：

FlexGrid 冻结列

FlexGrid 支持通过代码冻结行和列，但在此之前，从未公布过用于控制此功能的 UI。

在本次更新中，WijmoJS 添加了 allowPinning 属性，该属性可将图钉（pin 字形）添加到列标题中，通过单击图钉可实现冻结或取消冻结列：

FlexGrid 全文搜索

FlexGrid 支持使用 FlexGridFilter 组件，实现基于列的类似 Excel 那样的过滤方式。

如上图所示，FlexGridSearch 控件可以与 FlexGridFilter 组件一起使用。

转置表格

在常规表格中，同一项目在一行内显示，项目的属性在同一列中显示。

而在转置表格中，每个项目变成由同一列来表示，行显示的是项目属性。

为了实现上述需求，WijmoJS 添加了一个带有 TransposedGrid 控件的模块 —— Wijmo.grid.transposed，其中数据项目显示为列，其属性显示为行。

即便此前我们已经可以通过 FlexGrid 的 API 创建类似的转置视图，但通过 TransposedGrid 控件，将使这项工作变得更加容易。

保存 CSV 文件

FlexGrid 支持将表格中的数据保存为其他格式，如 CSV。

在本次更新中，WijmoJS 添加了两个功能，使保存 CSV 文件变得更加轻松：

在 WijmoJS 中添加了 saveFile 方法，可以直接通过该方法保存 CSV 文件，而不必一遍又一遍地复制相同的代码。
表格组件（Grid）的 getClipString 方法现在加入了一个 options 参数，该参数使您可以精确地指定生成剪辑字符串的方式。

通过上述更改，您可以使用两行代码保存 CSV 文件：

get clip string (current selection, with column headers) const clipString = grid.getClipString(null, options, true, false); // save to a file saveFile(clipString,'flexgrid.csv');

也可以通过 ClipStringOptions 属性完成更多功能：

ClipStringOptions.Default：使用默认选项（制表符作为单元格分隔符，带格式的/可见的/未引用的单元格），执行复制/粘贴到剪贴板时内部使用的格式。
ClipStringOptions.CSV：使用逗号作为单元格分隔符（CSV 格式），这也是导出 CSV 文件时的默认格式。
ClipStringOptions.QuoteAll：引用所有单元格，将所有单元格都用引号引起来，而不是仅对包含逗号和引号的单元格，这项改动将使输出文件更易于解析。
ClipStringOptions.SkipMerged：跳过已合并的单元格（如 Excel 一般）。在某些情况下，这使得输出文件更易于阅读。
ClipStringOptions.Unformatted：导出未格式化的值。与仅保存格式化的值相反，此格式保留了数值的全部精度。
ClipStringOptions.InvisibleRows：在输出中包括不可见和折叠的行（默认情况下，不包括不可见和折叠的行）。
ClipStringOptions.InvisibleColumns：在输出中包括不可见的列（默认情况下，不包括不可见列）。
ClipStringOptions.InvisibleCells：在输出中包括不可见的单元格。

WijmoJS 更多增强点：

将信息提示添加到了 “any”类型的多个回调函数和属性中。
向事件类的发送方和参数添加了通用类型。
为 CollectionView 和 ObservableArray 类添加了通用类型，可通过以下代码实例化 Customer 对象：var cv = new CollectionView（data）; var customer = cv.currentItem; // customer是Customer的一个实例
提供了编译时错误检查和 IntelliSense，确保开发者可以更快地编写更好的代码。

V2019.0 Update2

React 框架下 WijmoJS 组件功能增强

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

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

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

ListBox
ComboBox
MultiSelect
菜单

Vue 框架下 WijmoJS 组件功能增强

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

仪表盘的自定义能力增强

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

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

needleShape
needleLength
needleElement
createNeedleElement

新增模板文字常量

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

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

Undo / Redo（撤销/重做）

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

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

全新的分页控件

FlexGrid 中的多区域选择

在新版本中，WijmoJS 为 FlexGrid 提供了类似 Excel 的多范围选择功能，这项新功能允许用户按住 ctrl（或命令）在 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）

V2019.0 Update1

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

WijmoJS 在线 Demo示例

WijmoJS 产品文档

葡萄城技术团队重新构建了 WijmoJS 的 API 参考，与在线 Demo 示例和文档指南保持统一的样式。

WijmoJS API 参考

表格控件 FlexGrid 的新增功能

错误提示（errorTip）

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

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

重构并简化了 FlexGrid 的 CSS 规则

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

数据分析 OLAP 的新增功能

大纲视图

图表控件 FlexChart 的新增功能

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

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

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

FlexChart 中新增区域面积图表

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

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

FlexPie 多饼图

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

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

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

NPM 包的改动

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

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

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

全新的浏览器 API 组件 - ResizedObserver

V2018.0 Update3

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

数据切片器：OLAP 的 Slicer 控件

为 OLAP 增加“详细信息对话框” API

上面就是 WijmoJS 网格控件通过 detailDialog 属性打开的详细信息对话框，该属性也可用于自定义对话框。

OLAP 中的计算字段

WijmoJS 全面支持 Angular 7

使用 Web Workers 让前端 PDF 导出效率更高效

ComboBox / ListBox中增加分组表头属性

全新示例：基于 TabPanel 的 Ribbon 主题

OLAP 功能增强

数据切片器：OLAP 的 Slicer 控件

为 OLAP 增加“详细信息对话框” API

上面就是 WijmoJS 网格控件通过 detailDialog 属性打开的详细信息对话框，该属性也可用于自定义对话框。

OLAP 中的计算字段

新功能：日历选择器

Menu 菜单支持向下扩展子菜单

更新日志

使用 Web Workers 添加了对 FlexGrid pdf 导出的支持。有关详细信息，请参阅 PdfWebWorkersClient 和 PdfWeb Workers。 AngularJS PdfExport 示例添加了 Web Workers 示例以演示该功能。
WijmoJS 完全支持 Angular 7。
【WebComponents】添加了 WebComponents 互操作的 Beta 版本（wijmo.webcomponents.xxx.js 模块）。 Samples \ TS \ WebComponents \ WebComponentsIntro 示例说明了互操作的状态和用法。
【NPM】WijmoJS 作为'wijmo'包发布到全局 npm 注册表。
添加了 GroupPanel.filter 属性，允许您指定在网格上使用的 FlexGridFilter。完成后，组面板将在组标题上显示过滤器字形。单击过滤器字形将打开相应列的过滤器编辑器。
添加了一个 PivotGrid.detailDialog 属性，该属性返回对网格的 DetailDialog 控件的引用，该控件用于在用户双击单元格时显示详细记录。
在 Calendar 和 InputDate 控件中添加了 repeatButtons 属性，这会导致在按下按钮时重复触发日历按钮。（这类似于 InputNumber.repeatButtons 属性）。
向 Calenda r和 InputDate 控件添加了 showYearPicker 属性，使日历显示用户单击年日历标题时的年份列表。
添加了 PivotField.getValue 属性，该属性允许您指定用于检索给定项的字段值的自定义函数。这可用于实现可用于“分箱”的计算字段（例如，值=>大/中/小，国家=> A / B / C /其他）或任何计算的表达式（例如，转换=>销售/下载）。
向 ListBox 和 ComboBox 控件添加了 showGroups 属性。这会将组标题元素添加到具有分组项目源的列表中。例如：https：//jsfiddle.net/Wijmo5/sy7u9rn6/（它类似于 FlexGrid 控件中的 showGroups 属性）。
优化的 ListBox 加载性能（特别是在 IE / Edge 中）。
【FlexSheet】添加了允许用户禁用拖动单元格范围的选项。向 FlexSheet 添加了“enableDragDrop”属性。（TFS 342191）
【FlexSheet】在 FlexSheet 中禁用公式。在 FlexSheet 中添加“enableFormulas”属性。（TFS 341806）
添加了一个新的 wijmo.olap.Slicer 控件，可以提供简单的基于值的过滤。这类似于 Excel 的数据透视表中的 Slicer 控件。例如： https://jsfiddle.net/Wijmo5/3p8rcuqe/
添加了一个新的 wijmo.olap.PivotField.visible 属性，允许开发人员隐藏某些字段，使它们不会出现在 PivotPanel 控件中（因此无法从视图定义中删除或移动）。
【功能增强】FlexSheet 单击并拖动单元格角以填充数据。（TFS 229151）
扩展了文档以包含多个控件上的多个属性的缺少默认值。
【功能增强】FlexSheet 支持 INDIRECT 和 ADDRESS 公式。（TFS 337828）

V2018.0 Update2

全新的可视化设计器

VSCode设计器用于自定义Angular 框架下WijmoJS 组件

可视化在线设计器用于创建和自定义wijmoJS 控件

VSCode设计器

要在 VSCode 中安装此扩展，请单击 VS Marketplace上Designer 设置中的“安装”按钮。

此外，您还可以在 VSCode 的扩展管理器中搜索“wijmo”并从那里安装。

确保安装后重新加载 VSCode。然后打开一个使用 WijmoJS 控件的 Angular 应用程序并尝试启动设计器。

可视化在线设计器

Web-based Wijmo Designer

此设计器生成的代码是纯 HTML 和 JavaScript。生成的代码包括初始化控件所需的引用，宿主元素和 JavaScript 脚本。

支持 Angular 6 和 TypeScript 2.7

WijmoJS 已经全面支持Angular 6.0.0版。现阶段工作是将所有Demo示例升级到Angular V6，并将TypeScript版本升级到V2.7。

新的 React / Redux 加密货币跟踪应用程序

Wijmo Crypto Currency App

支持 Vue V2 的集成增强功能

Child components in Vue.js

此外，还添加了 WjFlexGridDetail 等组件，并添加了一些新的示例。点击查看 Vue 2 AllComponents sample。

WijmoJS 中的 Web Components

WijmoJS 中的Web Components

如果您不熟悉 Web组件，请参考这篇博客。

WijmoJS Web组件实现当前状态的关键点：

3、可以使用组件元素上的属性定义 WijmoJS 类属性。当属性值更改时，相应的 WijmoJS 类属性会相应更新。目前，更改类属性值不需要更改相应的属性值。

4、JavaScript 代码可以使用本机 Element.addEventListener（'event'，handler）方法为 WijmoJS 控件事件订阅处理程序。

Web组件的最大好处是，可以在不同的框架中使用相同的组件，并从框架的附加功能（如属性，属性和事件绑定）中受益。

SASS 支持的控件和主题

您可以轻松使用 SASS 文件来创建自己的主题风格。WijmoJS 还提供 SASS 文件供您使用和自定义。
您现在可以选择要包含在应用程序中的 SASS 模块。例如，现在有一个仅包含核心模块（非企业）的 WijmoJS-Core 文件，它只是全部 CSS 文件的一小部分。您可以有选择地使用要包含的模块来真正优化 CSS 大小。
WijmoJS 在 Web Component interop 中增加了对 Shadow DOM 的支持。
希望通过这些改进，为通过纯前端控件集 WijmoJS 开发的 Web 应用程序更易使用，更加轻盈。

ES6 和 ESModule 支持

本次更新，增加了 ES6 版本的 WijmoJS 模块（测试版），你可以在 WijmoJS 安装包的 NpmImages 文件夹中找到它：

wijmo-es2015-esm-min - ESM模块格式（ES6导入/导出语句）
wijmo-es2015-commonjs-min - 采用CommonJS模块格式

更新日志

【WebComponents】添加了WebComponents互操作的Beta版本（wijmo.webcomponents.xxx.js模块）。 Samples \ TS \ WebComponents \ WebComponentsIntro示例说明了互操作的状态和用法。
【npm】 WijmoJS作为'wijmo'包发布到全局npm注册表。
【WebComponents】添加了AllComponents示例，其中包括所有主要支持的组件。
添加了基于Web的WijmoJS 在线设计器，使用类似Visual Studio的属性网格和设计界面，提供基于 Web 的WijmoJS Designer PureJS控件。
添加了VSCode WijmoJS Designer扩展，使用类似Visual Studio的属性网格和设计界面。
Wijmo CSS文件现在可使用Sass实现。
【React / Redux】添加了React / Redux CryptoCurrencyTracking示例。
【ES6】版本462的WijmoJS ES6 npm图像（NpmImages中的wijmo-es2015-commonjs-min和wijmo-es2015-esm-min文件夹）被批准为发布版本。
【a11y】添加了一个wj-state-focus类选择器，它补充了以wj-state为中心的选择器。 wj-state-focus选择器获取具有焦点的WijmoJS控件。 wj-state-focused选择器获取包含焦点的所有WijmoJS控件。例如，如果嵌套了WijmoJS控件A，B和C，并且控件C包含活动元素，则.wj-state-focus将选择C，而.wj-state-focused将选择A，B和C. wj-state-focus选择器可用于在CSS中实现焦点轮廓。例如：

  .wj-state-focus, a:focus, button:not(.wj-btn-default):focus, input:not(.wj-form-control):focus,  input【type=checkbox】:focus {  box-shadow: 0px 0px 17px 0px rgb(41,173,68);}

其他更新

【NPM】“themes”文件夹现在是“styles”文件夹的子项。以前是“Styles”的同级目录。
新的基于Sass的CSS文件包含一些比原始CSS更具体的规则，因此如果您有自定义CSS文件，则可能需要调整其规则。
新的CSS文件有关于颜色，填充等的更一致的规则，因此您在升级时可能会看到一些小的更改。例如，我们在ListBox，FlexGrid，Calendar等中使项目填充一致。
新的基于Sass的主题文件是自包含的，不需要您再将基本wijmo.css文件添加到页面。这意味着对包含主题控件的页面的HTTP请求减少了一个。这不是一个突破性的变化，而是一个提高性能的机会。
将AutoComplete.isContentHtml属性的默认值从true更改为false。这不应该影响大多数应用程序，新的默认值可以防止非自愿的脚本/ html注入。如果它确实会影响您的应用程序，请将AutoComplete.isContentHtml属性设置为true，您将获得原始行为。

V2018.0 Update1

引入新的 License 许可机制，提高用户程序的安全性

WijmoJS 在本地主机上（localhost）不需要应用密钥，因此您的开发过程将不会中断。您只需在将应用程序部署到服务器时生成并应用密钥。

如果您在没有分配密钥的情况下部署 WijmoJS 应用程序，则会看到以下弹出窗口：

在您的产品或者项目中使用 WijmoJS 需要以下几个步骤：

Step1：购买 WijmoJS 产品
Step2：发给您需要授权的域名给我们，获取部署授权密钥
Step3：在您的产品或者项目中使用我们生成的部署授权，方法如下：

Example:

Wijmo.setlicenseKey(key);

WijmoJS 支持在 Npm 上发布，减少您的系统维护时间和跟踪依赖程度

唯一需要更改的是去除 package.json 中指向我们的服务器的自定义 URL，并添加要使用的特定版本的 WijmoJS：

Old (hosted):

"dependencies":{
    "@angular/common":"^5.0.0",
    ...
    "Wijmo":"http://prerelease.componentone.com/Wijmo5/npm-images/C1Wijmo-Enterprise-Eval-CommonJs-5.20173.409.tgz",
    "zone.js":"^0.8.18"
},

Old (local):

"dependencies":{
    "@angular/common":"^5.0.0",
    ...
    "Wijmo":" ../Wijmo_download/NpmImages/Wijmo-commonjs-min",
    "zone.js":"^0.8.18"
},

New:

"dependencies":{
    "@angular/common":"^5.0.0",
    ...
    "Wijmo":"5.20181.450",
    "zone.js":"^0.8.18"
},

安装 WijmoJS 的 npm 命令如下：

npm install Wijmo

@import 语句也是一样的：

import * as wjcGrid from 'Wijmo/Wijmo.grid';

这就是新版本的 WijmoJS,希望您能接受 WijmoJS 对于目前主流 web app 开发框架的更新。

关于用 npm 生成一个 WijmoJS 的 web app 博客教程

新控件：智能的 TabPanel 选项卡控件

根据 WijmoJS 用户反馈，新增选项卡控件，使用户可以在不同选项之间进行切换。

此外，我们从所有示例中删除了 Bootstrap 选项卡，并从所有示例中完全删除了 jQuery，从此你将不再需要依赖任何文件库。

使用 WijmoJS 添加无依赖关系的 JavaScript TabPanel 控件博客教程

OLAP 中的 Microsoft SSAS Cube 支持

此功能要求您在 SSAS 多维数据集中配置一些内容，以确保可以通过 AJAX 请求访问它。阅读我们的博客，了解如何设置 WijmoJS OLAP 和 SSAS 多维数据集。

Olap 集成 SSAS 的博客教程

ReportViewer 中的 ActiveReports 支持

FlexSheet Tables

WijmoJS 为 FlexSheet 添加了子表格支持。 FlexSheet 中的表格的行为与 Excel 类似; 您可以在工作表中选择一系列单元格并将它们转换为格式化的表格：

React 子组件支持

下面是一个 FlexGrid 的示例，其中列出了标记中声明的列：

<Wj.FlexGriditemsSource={this.state.data}>
    <Wj.FlexGridColumn header={this.state.countryHeader} binding="country" width="*" />
    <Wj.FlexGridColumn header="Date" binding="date" />
    <Wj.FlexGridColumn header="Revenue" binding="amount" format="n0" />
<Wj.FlexGridColumn header="Active" binding="active" />
</Wj.FlexGrid>

HTTPS CDN

WijmoJS CDN 的新 URL 如下：

<!-- Wijmo references (required) -->
<script src="https://cdn.grapecity.com/Wijmo/5.20181.450/controls/Wijmo.min.js"></script>
<link href="https://cdn.grapecity.com/Wijmo/5.20181.450/styles/Wijmo.min.css" rel="stylesheet"/>
<!-- Wijmo controls (optional, include the controls you need) -->
<script src="https://cdn.grapecity.com/Wijmo/5.20181.450/controls/Wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/Wijmo/5.20181.450/controls/Wijmo.chart.min.js"></script>
<script src="https://cdn.grapecity.com/Wijmo/5.20181.450/controls/Wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/Wijmo/5.20181.450/controls/Wijmo.gauge.min.js"></script>

我们还承载了最新版本，每个正式版本都会更新：

<script src="https://cdn.grapecity.com/Wijmo/5.latest/controls/Wijmo.min.js"></script>
<link href="https://cdn.grapecity.com/Wijmo/5.latest/styles/Wijmo.min.css" rel="stylesheet"/>
<!-- Wijmo controls (optional, include the controls you need) -->
<script src="https://cdn.grapecity.com/Wijmo/5.latest/controls/Wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/Wijmo/5.latest/controls/Wijmo.chart.min.js"></script>
<script src="https://cdn.grapecity.com/Wijmo/5.latest/controls/Wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/Wijmo/5.latest/controls/Wijmo.gauge.min.js"></script>

辅助功能增强

我们致力于在此版本中提供辅助功能并增加更多增强功能。我们改进了无障碍功能:

分层 FlexGrid（带有 ARIA treegrid 属性）
自动完成和组合框
FlexGridFilter 对话框

更新日志

我们致力于在此版本中提供辅助功能并增加更多增强功能。我们改进了无障碍功能:

分层 FlexGrid（带有 ARIA treegrid 属性）
自动完成和组合框
FlexGridFilter 对话框

【许可】添加了一个 WijmoJS.setdistribution 密钥方法，可以启用单一构建部署，包括 npm。如果分配密钥未设置，则 WijmoJS 以评估模式运行（带有水印）。设置分配密钥（密钥提供给我们网站上的客户）导致 WijmoJS 以生产模式运行（无水印）。

【npm】 WijmoJS 作为 'WijmoJS' 软件包发布到全球 npm 注册中心。

安装发布版本

> npm install Wijmo             // latest
> npm install Wijmo@5.20173.431 // specific version

安装 RC 版本

> npm install Wijmo@rc              // latest
> npm install Wijmo@5.20181.432-rc  // specific version

安装每日构建版

> npm install Wijmo@nightly                             // latest
> npm install Wijmo@5.20173.431-nightly.d20180312.t0720 // specific
version (suffix denotes build date/time)

在线 npm 软件包以 CommonJS 格式提供 WijmoJS 模块。与之前一样，替代模块格式在 WijmoJS 下载 zip 的 NpmImages 文件夹中可用。

【npm】 WijmoJS npm 图像现在包含 CSS 样式和文化文件：
'styles'子文件夹中的 Wijmo.css。用法示例：import'Wijmo / style / Wijmo.css';
主题 CSS 在'主题'子文件夹中。用法示例：导入'Wijmo / themes / Wijmo.theme.dark.css';
培养 js 文件在'文化'子文件夹中。用法示例：import'Wijmo / cultures / Wijmo.culture.ja';

【可访问性】改进了 FlexGrid，FlexGridFilter 和 ComboBox 组件上的 ARIA 支持。

【Olap】添加了对将 PivotEngine 组件直接绑定到 SSAS 多维数据集的支持。以前，绑定到 SSAS 多维数据集需要设置一个服务器和暴露多维数据集的 ComponentOne 数据引擎服务。现在，您可以将 PivotEngine 直接绑定到 SSAS 多维数据集。

OLAP 和 SSAS Cube 博客教程

示例：

var ng = new Wijmo.olap.PivotEngine({
    itemsSource:{
        url:'http://ssrs.componentone.com/OLAP/msmdpump.dll',
        cube:'Adventure Works'
    }

【ReportViewer】添加了对 GrapeCity ActiveReports 报告生成器的支持。 PureJS ReportViewer 示例已更新以演示新功能。

添加了一个提供标签导航的 Wijmo.nav.TabPanel 控件。这个新控件可以用来替换 bootstrap 选项卡，它需要 bootstrap.js 和 jQuery。

【React】添加了子组件支持。
React 添加了对代表某些控件属性的复杂对象的子组件的支持，例如 FlexGrid Column 对象的 FlexGridColumn 和 Chart Series 对象的 FlexChartSeries。

所以从现在开始，除此之外，还有如下的静态列定义：

<Wj.FlexGrid autoGenerateColumns={ false }
    columns={[
        { header 'Country' , binding 'country' , width '*' },
        { header 'Date' , binding 'date' },
        { header 'Revenue' , binding 'amount' , format 'n0' },
        { header 'Active' , binding 'active' }
    ]}
    itemsSource={ this.state.data } />

你可以使用下面的动态定义：

<Wj.FlexGrid itemsSource={this.state.data}>
    <Wj.FlexGridColumn header={this.state.countryHeader} binding="country" width="*" />
    <Wj.FlexGridColumn header="Date" binding="date" />
    <Wj.FlexGridColumn header="Revenue" binding="amount" format="n0" />
<Wj.FlexGridColumn header="Active" binding="active" />
</Wj.FlexGrid>

这种改进使得动态更新数组属性项成为可能，例如一组网格列，其中'渲染'代码如下所示：

<Wj.FlexGrid itemsSource={this.state.data}>
    {this.state.columnsDefinitions.map((colDef) => {
        return <Wj.FlexGridColumn key={colDef.binding} binding={colDef.binding} />}
    )}
</Wj.FlexGrid>

【olap.PivotPanel】添加了对非多维数据源中分层字段结构的支持。

【Excel】增加了对 FlexSheet 控件和 Wijmo.xlsx 模块中表格的支持。

【FlexSheet】将 _filter 公开而不是私有属性。

【FlexGrid】添加了支持单元格中多行文本的 Column.multiLine（和 Row.multiLine）功能。将 multiLine 设置为 true 将导致单元格在渲染单元格内容时使用嵌入换行符（\ n）。用户可以通过按 alt + Enter 键来输入换行符，就像在 Excel 中一样。

【FlexGrid】添加了对 Column.textAlign ='justify-all' 的支持。这个新设置明确地设置了 CSS 属性 textAlignLas 和 textJustify，这对基于表意文字的语言比如中文和日文很重要。

【全球化】增加了对日期格式中转义字符的支持，例如
```
wijmo.Globalize.format（date，'\\ h h \\ m m'）; // h 3 m 55
```

更新所有基于 Angular 和 React npm 模块的样本的配置，以支持符号链接模块安装。

添加了一个 FlexGrid.autoScroll 属性，用于确定当用户拖动控件边缘附近的行或列时，网格是否应自动滚动其内容。

WijmoJS

WijmoJS

WijmoJS 历史版本

V2023.0 Update1

增强了对 React 18 严格模式的支持

辅助功能改进

支持通过键盘导航聚焦 FlexGrid 标题

全球化中的动态文化切换

可以更改 FlexGrid 空编辑后的行为方式

V2022.0 Update2

支持 Angular 14

支持 React 18

辅助功能改进

FlexChart 可滚动图例

V2021.0 Update1

加入同时兼容 Angular、React 和 Vue 的可视化地图组件

新的图表动态调色板

用于绑定 REST API 的 RestCollectionView 组件

可用于 Angular、React 和 Vue 的 MultiRow 单元格模板

V2020.0 Update2

兼容 Angular 10 和 Vue 3

加入适用于 Angular、React 和 Vue 的条形码组件

FlexGrid 中的自定义编辑器

PDF 安全性

新组件：TransposedMultiRow（垂直转置）

V2020.0 Update1

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

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

产品安全性增强

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

针对 FlexGrid 组件的更新

针对 FlexChart 组件的更新

针对 Input 组件的更新

其它新特性

V2019.0 Update3

与时俱进！WijmoJS 将支持 Angular 9 和 Ivy 编译器

一流的框架集成：WijmoJS 针对 Vue 的更新

FlexGrid 单元格模板

针对 Vue 组件的双向绑定

一流的框架集成：WijmoJS 针对 React 的更新

面向原生 JavaScript 的 FlexGrid 单元格模板

针对表格组件（FlexGrid）的更新

FlexGrid 多列排序

FlexGrid 冻结列

FlexGrid 全文搜索

转置表格

保存 CSV 文件

更多 FlexGrid 增强功能

针对多行网络（MultiRow）的增强

图表组件（Chart）加入阶梯图

CollectionView 过滤器增强

产品易用性提升

WijmoJS 更多增强点：

V2019.0 Update2

React 框架下 WijmoJS 组件功能增强

Vue 框架下 WijmoJS 组件功能增强

仪表盘的自定义能力增强

新增模板文字常量

Undo / Redo（撤销/重做）

全新的分页控件

FlexGrid 中的多区域选择

FlexGrid 中性能调优 API

全球化中更多语言支持

其他更新项目

V2019.0 Update1

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

表格控件 FlexGrid 的新增功能

错误提示（errorTip）

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

重构并简化了 FlexGrid 的 CSS 规则

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

数据分析 OLAP 的新增功能

大纲视图

图表控件 FlexChart 的新增功能

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

FlexChart 中新增区域面积图表

FlexPie 多饼图

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

NPM 包的改动

全新的浏览器 API 组件 - ResizedObserver