本次发布，WijmoJS 将支持 Angular 9 和 Ivy 编译器！与此同时，WijmoJS 还提供了用于 React 和 Vue 框架的 FlexGrid 单元格模板，以及针对 Vue 组件的双向绑定模式，不但简化了表单填报的步骤，还增强了 FlexGrid 的实用性性能。最后，针对 TypeScript 类型，WijmoJS 同样进行了优化，使其在 VSCode 中更易于使用。
WijmoJS是为企业应用程序开发而推出的一系列包含HTML5和JavaScript的开发控件。其中包含了金融图表、FlexSheet、先进的JavaScript控件（Wijmo 5）和经典的jQuery小部件（Wijmo 3）。无论您的应用程序是移动应用还是必须要支持IE6，Wijmo Enterprise均能满足您的需求。
WijmoJS最新版
本次发布，WijmoJS 将支持 Angular 9 和 Ivy 编译器！与此同时，WijmoJS 还提供了用于 React 和 Vue 框架的 FlexGrid 单元格模板，以及针对 Vue 组件的双向绑定模式，不但简化了表单填报的步骤，还增强了 FlexGrid 的实用性性能。最后，针对 TypeScript 类型，WijmoJS 同样进行了优化，使其在 VSCode 中更易于使用。
前端开发工具包 WijmoJS V2019.0 Update3 的主要新特性有：
-
与时俱进！WijmoJS 将支持 Angular 9 和 Ivy 编译器
-
针对 Vue 框架：加入 FlexGrid 单元格模板、Vue 组件的双向绑定机制
-
针对 React 框架：加入 FlexGrid 单元格模板
-
表格组件（FlexGrid）：多列排序、冻结列、全文搜索、转置表格、保存 CSV 等
-
多行网络（MultiRow）：支持聚合组、列标题布局功能
-
图表组件（Chart）：加入阶梯图
-
CollectionView ：过滤器增强
更新详细内容：
与时俱进！WijmoJS 将支持 Angular 9 和 Ivy 编译器
每当 Angular 发布最新版本，WijmoJS 必定第一时间与之兼容！
本次发布，WijmoJS 将支持 Angular v9.0.0-rc.2 版本，并与最新的 Ivy Compiler 兼容。
开发者在使用 WijmoJS 的时候，完全不必考虑其在 Angular 框架下的兼容性问题，因为 Angular 技术团队在模块打包时，就已经为我们提供了一些建议，并帮助我们对编译器进行了优化。
正是在 Angular 和 WijmoJS 技术团队的共同努力下，开发者才可以更快的使用 Ivy Compiler 构建企业级 Web 应用程序。
一流的框架集成：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>
针对 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 语法，甚至可以绑定其他组件。
面向原生 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：在输出中包括不可见的单元格。
更多 FlexGrid 增强功能
可折叠列组：以声明的方式创建可折叠列组。通过将 columns 属性（或 columnGroups 属性）设置为包含列定义的数组来完成，其中定义包含子列的“columns”集合。
添加了静态属性—— defaultTypeWidth，该属性允许根据自动生成的网格列的数据类型来指定默认宽度。
改进的剪贴板功能：添加了 copyHeaders 属性，该属性可让指定在将数据复制到剪贴板时，是否应包含行标题或列标题。
RowDetail 冻结单元格：允许单元格明细跨越冻结边界。
针对多行网络（MultiRow）的增强
MultiRow 聚合组：添加了 multiRowGroupHeaders 属性，该属性允许标题具有多个标题行（适用于显示聚合）。
MultiRow 列标题布局：添加了 headerLayoutDefinition 属性，该属性可让您定义列标题的自定义布局。
图表组件（Chart）加入阶梯图
StepLine Charts（阶梯图）常用来显示特定时间点的变化，它们对于查看值随时间变化的大小十分有用。
WijmoJS 在 FlexChart 图表组件中添加了阶梯图、StepSymbols 和 StepArea 等图表类型。
CollectionView 过滤器增强
WijmoJS 添加了包含过滤器功能数组的 filters 属性，该属性可以链接具有多个独立过滤器功能的过滤器。
产品易用性提升
WijmoJS 的信息提示在本次更新中做了重大改进，这些改进将使 WijmoJS 更易于使用，并且帮助开发者更轻松地找到代码中的错误。
您可以在回调函数（以前只是通用的 Any 类型）中看到这些提示：
WijmoJS 更多增强点：
-
将信息提示添加到了 “any”类型的多个回调函数和属性中。
-
向事件类的发送方和参数添加了通用类型。
-
为 CollectionView 和 ObservableArray 类添加了通用类型，可通过以下代码实例化 Customer 对象：var cv = new CollectionView（data）; var customer = cv.currentItem; // customer是Customer的一个实例
-
提供了编译时错误检查和 IntelliSense，确保开发者可以更快地编写更好的代码。
想要购买WijmoJS 正版授权，或了解更多产品信息请点击【咨询在线客服】
标签：
来源：慧都
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！