WijmoJS 是一款基于 HTML5 的前端開發(fā)工具包，由 80 多種靈活、高效、跨平臺、零依賴的 JavaScript UI 組件構(gòu)成，如表格（Grid）、圖表（Chart）、數(shù)據(jù)分析（Olap）、導(dǎo)航（Navigation）和金融圖表等，完美兼容原生 JavaScript，以及 Angular、React、Vue、TypeScript、Knockout 和 Ionic 等框架，可助力企業(yè)以最快的速度開發(fā)并構(gòu)建出一套成熟的 Web 應(yīng)用程序。

近日，前端 UI 組件庫 WijmoJS V2020.0 Update1 正式發(fā)布了！

點擊下載WijmoJS最新版

這一版本將更加體現(xiàn)出 WijmoJS 的小巧、靈活和高效。我們將 WijmoJS 的組件和功能模塊化，減少了應(yīng)用程序加載時所需的時間。同時，我們還優(yōu)化了數(shù)據(jù)渲染引擎（通常使用虛擬化），因此無論您的數(shù)據(jù)集有多大，我們的組件都可以實現(xiàn)高效加載。

為了響應(yīng)用戶需求，WijmoJS 的新版本加入許多在構(gòu)建 Web 應(yīng)用程序時會用到的功能，除了可在 React Redux 應(yīng)用程序中編輯 DataGrid 外，還有針對 FlexGrid 和 FlexChart 的增強(qiáng)功能。

本次發(fā)布的新功能有：

• 為 React 框架提供的新功能：可編輯的 React Redux DataGrid
• 使用 OpenFin 和 JavaScript 組件，構(gòu)建股票投資組合 APP
• 產(chǎn)品安全性增強(qiáng)
• 針對 FlexGrid、FlexChart、Input 組件的更新

為 React 框架提供的新功能：可編輯的 React Redux DataGrid

FlexGrid為 React Redux 應(yīng)用中的可編輯數(shù)據(jù)網(wǎng)格提供了一個企業(yè)級解決方案！

通常情況下，使用 FlexGrid 的用戶會通過網(wǎng)格來更新基礎(chǔ)數(shù)據(jù)數(shù)組。然而，這種方法不適用于需要數(shù)據(jù)不變性的狀態(tài)管理系統(tǒng)（例如 Redux）。

現(xiàn)在，這個問題可以通過使用 ImmutabilityProvider 擴(kuò)展組件來解決。

引入 FlexGrid，綁定到 Redux Store 的數(shù)據(jù)數(shù)組后，您可以通過以下方式更改網(wǎng)格行為：

• 允許用戶以常規(guī)方式（更改項目值、添加/刪除行、粘貼和文本）編輯網(wǎng)格數(shù)據(jù)。
• 允許所有的數(shù)據(jù)轉(zhuǎn)換操作，包括排序、分組和過濾。
• 防止網(wǎng)格因應(yīng)用戶編輯而發(fā)生的變異。相反，它會觸發(fā) dataChanged 事件，該事件可用于將數(shù)據(jù)更改操作調(diào)度到 Redux Store。

使用 OpenFin 和 JavaScript 組件，構(gòu)建股票投資組合 APP

WijmoJS 的股票投資組合 APP 是一個 Demo，演示了 OpenFin 應(yīng)用程序中 WijmoJS 組件的用法。

股票投資組合 APP 包含幾個窗口，每個窗口都使用了不同的 Web 框架（包含React、Angular 和 Web 組件）。 OpenFin 的 新Platform API 允許用戶在所需的工作區(qū)中排列和自定義窗口。

該視頻演示了如何借助 WijmoJS 組件，構(gòu)建股票投資組合APP：

產(chǎn)品安全性增強(qiáng)

隨著越來越多的應(yīng)用程序使用 JavaScript 腳本，客戶端的安全性變得至關(guān)重要。

內(nèi)容安全策略（CSP）作為一層額外保護(hù)，有助于提前發(fā)現(xiàn)并緩解某些類型的攻擊，如跨站點腳本（XSS）和數(shù)據(jù)注入攻擊。

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

針對 FlexGrid、FlexChart、Input 組件的更新

針對 FlexGrid 組件的更新

• FlexGrid 中實現(xiàn)易于點擊的復(fù)選框
• FlexGrid 列選擇、多范圍復(fù)制和粘貼
• Checkbox Selector Column for FlexGrid （復(fù)選框選擇器列）
• Improved Resizing for Hidden Columns and Rows in FlexGrid（改進(jìn)隱藏行列的大小調(diào)整）
• RadioButton and AutoComplete DataMap Editors for FlexGrid（新增對 RadioButton 和 AutoComplete DataMap 的原生支持）
• Improved Validation Behavior in FlexGrid（改進(jìn)了數(shù)據(jù)驗證行為）
• Expanded Column Pinning Options in FlexGrid（擴(kuò)展了pinning 固定選項）
• FlexGrid Button Columns with CellMaker（使用 CellMaker 實現(xiàn)按鈕列）
• FlexGrid Hyperlink Columns with CellMaker（使用 CellMaker 實現(xiàn)超鏈接列）
• FlexGrid Image Columns with CellMaker（使用 CellMaker 實現(xiàn)圖片列）
• FlexGrid Star Rating Column with CellMaker（使用 CellMaker 實現(xiàn)星級評分列）
• FlexGrid Sparkline Columns with CellMaker（使用 CellMaker 實現(xiàn) Sparkline 列）
• Excel Export Progress Indicator for FlexGrid（FlexGrid 導(dǎo)出 Excel 進(jìn)度條）
• PDF Export Progress Indicator for FlexGrid（FlexGrid 導(dǎo)出 PDF 進(jìn)度條）
• PDF Export Progress Indicator for FlexGrid（FlexGrid 導(dǎo)出 PDF 進(jìn)度條）

針對 FlexChart 組件的更新

• Plot Revenue Over Expenses with BreakEven Chart for JavaScript Apps（可使用 BreakEven Chart 為 JavaScript 應(yīng)用程序繪制支出收益表）

針對 Input 組件的更新

• Easily Filter Long MultiSelect Lists（多選過濾器）
• More Options for Triggering Popups（為彈出式觸發(fā)器新增更多選項）

其它新特性：

• Batch Updates in OdataCollectionView（ODataCollectionView 批量更新）