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

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

點擊下載WijmoJS最新版

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

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

本次發布的新功能有：

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

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

FlexGrid為 React Redux 應用中的可編輯數據網格提供了一個企業級解決方案！

通常情況下，使用 FlexGrid 的用戶會通過網格來更新基礎數據數組。然而，這種方法不適用于需要數據不變性的狀態管理系統（例如 Redux）。

現在，這個問題可以通過使用 ImmutabilityProvider 擴展組件來解決。

引入 FlexGrid，綁定到 Redux Store 的數據數組后，您可以通過以下方式更改網格行為：

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

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