概述

前端開發(fā)工具包WijmoJS在2019年的第一個主要版本2019V1已經(jīng)發(fā)布，本次發(fā)布包括了更加易用的在線Demo系統(tǒng)、各控件新增功能、NPM 包的改動，以及全新的瀏覽器API組件。

?

前端開發(fā)工具包 WijmoJS 簡介

WijmoJS 前端開發(fā)工具包由多款靈活高效、零依賴、輕量級的純前端控件組成，如表格控件 FlexGrid、圖表控件 FlexChart、數(shù)據(jù)分析 OLAP 等，完美支持原生 JavaScript，以及 Angular、React、Vue、TypeScript、Knockout 和 Ionic 等框架，可用于企業(yè)快速構(gòu)建桌面、移動 Web 應(yīng)用程序。

 

WijmoJS 2019V1新特性

 

前端開發(fā)工具包WijmoJS 2019V1的主要新特性有：

 

1.全新的在線Demo系統(tǒng),

2.表格控件 FlexGrid 的新增功能

3.數(shù)據(jù)分析OLAP 的新增功能

4.圖表控件FlexChart 的新增功能

5.其他功能：NPM包的改動、全新的瀏覽器API

 

更加易用的在線Demo系統(tǒng)：包含示例源碼、參考文檔和API

WijmoJS 在線 Demo 系統(tǒng)中包含了超過 500 種示例源碼、200 份文檔和統(tǒng)一易讀的產(chǎn)品 API 參考，且每一份源碼均使用原生 JavaScript（基于 ES6 模塊）、Angular（V2+）、Vue（V2+）、React 來實現(xiàn)，助您快速上手，開發(fā)無憂。

 

WijmoJS 提供了超過 500 種示例源碼

 

WijmoJS 希望用戶通過全新的在線Demo系統(tǒng)，輕松查詢需要使用的功能示例。您也可直接通過搜索功能，查看該示例不同框架下的源碼，并對代碼進行在線編輯。

 

希望 WijmoJS 的在線Demo系統(tǒng)，能讓您的開發(fā)變的更加輕松。同時，也歡迎您向WijmoJS 的Demo系統(tǒng)推薦您認(rèn)為有用的功能代碼，葡萄城技術(shù)團隊會將其添加到在線Demo系統(tǒng)中。

 

重寫了超過200份產(chǎn)品文檔指南

葡萄城技術(shù)團隊希望 WijmoJS 使用起來盡可能簡單。為了體現(xiàn)這一點，我們重新編寫了200多個全新的文檔指南，這些指南將在您的使用過程中給予幫助。同時，該文檔還提供全文搜索功能，您可快速找到需要查看的內(nèi)容。

 

 

全新的產(chǎn)品API參考

葡萄城技術(shù)團隊重新構(gòu)建了WijmoJS 的API參考，與在線 Demo 示例和文檔指南保持統(tǒng)一的樣式。

 

 

表格控件 FlexGrid 的新增功能

 

錯誤提示（errorTip）

表格控件 FlexGrid 中新增錯誤提示（errorTip），用于在驗證錯誤時顯示提示信息。同時，用戶還可以針對此功能進行自定義擴展，或?qū)⑵湓O(shè)置為空（null）。

 

該功能的效果如下圖：

 

 

與 Excel 高度類似的數(shù)據(jù)選擇器

FlexGrid中添加了一個名為anchorCursor的選項，其主要功能是提供與 Excel 高度類似的數(shù)據(jù)選擇器。

 

（與 Excel 高度類似的數(shù)據(jù)選擇器）

 

重構(gòu)并簡化了FlexGrid的CSS規(guī)則

WijmoJS 重構(gòu)并簡化了FlexGrid的CSS規(guī)則，這樣用戶自定義單元格背景就變得越來越簡單。此前，WijmoJS的單元格CSS選擇器不能用單個類選擇器重寫。但在本次重構(gòu)之后，您可以自定義一個類，以便更容易地設(shè)置單元格背景和文本的樣式。

 

例如：

 

（重構(gòu)并簡化了FlexGrid的CSS規(guī)則）

 

請注意，為了使wj-cell類更弱、更易于樣式化，我們必須使其他一些類更強，如：wj-header和wj-alt。您可能需要調(diào)整CSS以使用組合類選擇器，如.wj-cell.wj-header

 

進一步提升了 FlexGrid 的滾動性能

WijmoJS 進一步提高了FlexGrid的滾動性能，并擴展了單元格重新排序邏輯，以便在水平滾動和凍結(jié)單元格網(wǎng)格上工作。這是一個不起眼的變化，但對于那些DOM操作更耗時費力的舊瀏覽器來說，卻意味著高效和低耗。當(dāng)然，它也使FlexGrid在現(xiàn)代瀏覽器中更快！

 

數(shù)據(jù)分析 OLAP 的新增功能

 

大綱視圖

WijmoJS 在OLAP中添加了一個新的PivotGrid.OutlineMode屬性：在大綱視圖下，PivotGrid以更緊湊的方式呈現(xiàn)行字段。對于具有大量行字段的視圖，該功能將十分受用。它類似于Excel在其數(shù)據(jù)透視表中提供的功能。

 

 

圖表控件 FlexChart 的新增功能

 

新增用戶自定義支持：工具提示、數(shù)據(jù)點外觀

 

FlexChart 添加了兩個新功能，使用戶自定義變得更加容易：

1.series.tooltipcontent 屬性，允許自定義特定系列的工具提示

2.series.itemFormatter屬性，允許自定義特定系列中數(shù)據(jù)點的外觀

 

此前，工具提示和數(shù)據(jù)點外觀直接作用于圖表中的所有系列。如今，這些新的改進將為具有多個系列的圖表添加了更多的靈活性和自定義設(shè)置。

 

 

FlexChart 中新增區(qū)域面積圖表

WijmoJS 新版本包含了幾個全新的圖表：如區(qū)域面積圖。該圖表用于強調(diào)數(shù)量隨時間變化的程度，可用于引起人們對總值趨勢的注意。

 

使用方法：通過將圖表類型設(shè)置為“區(qū)域”，然后在序列綁定中設(shè)置最小值和最大值，就可以使用此圖表類型。

 

（區(qū)域面積圖表）

 

FlexPie 多餅圖

WijmoJS 允許通過使用同一數(shù)據(jù)源創(chuàng)建多個餅圖“系列”，即可以使用FlexPie在單個圖表中可視化更多數(shù)據(jù)。

 

使用方法：要創(chuàng)建多個餅圖系列，請在FlexPie.binding中指定幾個逗號分隔的屬性。

 

 

其他功能：NPM 包的改動、全新的瀏覽器 API

 

NPM 包的改動

WijmoJS NPM包已移動到 \@grapecity 作用域。這帶來了明顯的好處，如多個模塊格式，可大大簡化在自己的NPM服務(wù)器上托管WijmoJS使用。

 

以前，WijmoJS NPM模塊存儲在單個“Wijmo”NPM包中?，F(xiàn)在，每個模塊都表示為\@grapecity作用域中的一個單獨的包，如\@grapecity/wijmo.input或\@grapecity/wijmo.grid。

 

將應(yīng)用程序切換為使用新的作用域包需要在應(yīng)用程序代碼中進行一些修改，即更新“import”語句中的WijmoJS模塊名。

 

為了幫助用戶順利過渡，葡萄城技術(shù)團隊將在一定時間內(nèi)繼續(xù)維護非作用域的“wijmo”包。因此，最新的WijmoJS版本將以作用域包和非作用域包的形式提供。但您應(yīng)該盡快進行應(yīng)用程序的更新，以便使用\@grapecity范圍內(nèi)的新包。

 

如果您想安裝所有文件（類似于WijmoJS包），可以選擇 \@grapecity/wijmo.all 包。

 

全新的瀏覽器API 組件 - ResizedObserver

在這個版本中，WijmoJS 使用一個名為ResizedObserver的新瀏覽器API來改進所有控件的布局呈現(xiàn)方式。此API允許用戶知曉何時該調(diào)整控件元素的大小或更改其可見性，以確保 Web 系統(tǒng)的布局樣式是否適應(yīng)它們的容器。

 

純前端控件集 WijmoJS，為您的企業(yè)應(yīng)用提供更加靈活的操作體驗，在全球率先支持 AngularJS，并提供性能卓越、零依賴的 FlexGrid 和金融圖表等多個控件，為您提供易用、輕松的操作體驗，全面滿足開發(fā)所需。