WijmoJS是為企業(yè)應(yīng)用程序開發(fā)而推出的一系列包含HTML5和JavaScript的開發(fā)控件。其中包含了金融圖表、FlexSheet、先進(jìn)的JavaScript控件（Wijmo 5）和經(jīng)典的jQuery小部件（Wijmo 3）。無論您的應(yīng)用程序是移動(dòng)應(yīng)用還是必須要支持IE6，Wijmo Enterprise均能滿足您的需求。

點(diǎn)擊下載WijmoJS最新版

本次發(fā)布，WijmoJS 將支持 Angular 9 和 Ivy 編譯器！與此同時(shí)，WijmoJS 還提供了用于 React 和 Vue 框架的 FlexGrid 單元格模板，以及針對(duì) Vue 組件的雙向綁定模式，不但簡化了表單填報(bào)的步驟，還增強(qiáng)了 FlexGrid 的實(shí)用性性能。最后，針對(duì) TypeScript 類型，WijmoJS 同樣進(jìn)行了優(yōu)化，使其在 VSCode 中更易于使用。

前端開發(fā)工具包 WijmoJS V2019.0 Update3 的主要新特性有：

• 與時(shí)俱進(jìn)！WijmoJS 將支持 Angular 9 和 Ivy 編譯器

• 針對(duì) Vue 框架：加入 FlexGrid 單元格模板、Vue 組件的雙向綁定機(jī)制

• 針對(duì) React 框架：加入 FlexGrid 單元格模板

• 表格組件（FlexGrid）：多列排序、凍結(jié)列、全文搜索、轉(zhuǎn)置表格、保存 CSV 等

• 多行網(wǎng)絡(luò)（MultiRow）：支持聚合組、列標(biāo)題布局功能

• 圖表組件（Chart）：加入階梯圖

• CollectionView ：過濾器增強(qiáng)

更新詳細(xì)內(nèi)容：

與時(shí)俱進(jìn)！WijmoJS 將支持 Angular 9 和 Ivy 編譯器

每當(dāng) Angular 發(fā)布最新版本，WijmoJS 必定第一時(shí)間與之兼容！

本次發(fā)布，WijmoJS 將支持 Angular v9.0.0-rc.2 版本，并與最新的 Ivy Compiler 兼容。

開發(fā)者在使用 WijmoJS 的時(shí)候，完全不必考慮其在 Angular 框架下的兼容性問題，因?yàn)? Angular 技術(shù)團(tuán)隊(duì)在模塊打包時(shí)，就已經(jīng)為我們提供了一些建議，并幫助我們對(duì)編譯器進(jìn)行了優(yōu)化。

正是在 Angular 和 WijmoJS 技術(shù)團(tuán)隊(duì)的共同努力下，開發(fā)者才可以更快的使用 Ivy Compiler 構(gòu)建企業(yè)級(jí) Web 應(yīng)用程序。

一流的框架集成：WijmoJS 針對(duì) Vue 的更新

FlexGrid 單元格模板

單元格模板是 FlexGrid 組件在 Angular 框架下最受歡迎的功能之一。現(xiàn)在，WijmoJS 分別針對(duì) Vue 和 React 框架，提供了這個(gè)強(qiáng)大的功能。

單元格模板適用于在表格組件（Grid）的任何單元格中聲明標(biāo)記、表達(dá)式和自定義內(nèi)容。

<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>

針對(duì) Vue 組件的雙向綁定

雙向綁定在 Vue 中是一種強(qiáng)大的機(jī)制，可用于簡化表單填報(bào)的實(shí)現(xiàn)步驟，Vue 提供了兩種用于聲明雙向綁定的語法：v-model 指令和 sync 綁定修飾符。

在 WijmoJS 的輸入組件中，已支持上述兩種雙向綁定語法，因此您可以根據(jù)項(xiàng)目需要在它們之間進(jìn)行選擇。

一流的框架集成：WijmoJS 針對(duì) React 的更新

就像在 Angular 和 Vue 中一樣，您同樣可以在 React 中使用 FlexGrid 的單元格模板，這些單元格模板允許您向 React 數(shù)據(jù)表中的任何單元格添加自定義內(nèi)容。

單元格模板功能，使自定義 FlexGrid 中的任何單元格都變得非常容易。

仍以下面這些國家/地區(qū)列中呈現(xiàn)標(biāo)志圖像的示例為例：

<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>

如您所見，“單元格模板”中的可定義內(nèi)容，包含了標(biāo)記、HTML 語法，甚至可以綁定其他組件。

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

除了Angular、React 和 Vue 框架，WijmoJS 針對(duì)純 JavaScript 的 FlexGrid 組件也同樣添加了新的單元格模板。如今，WijmoJS 的 Column 類具備了一個(gè)全新屬性—— cellTemplate，該屬性允許自定義渲染單元格，而無需借助 formatItem 事件。

Column.cellTemplates的使用，比在 Angular、React 或 Vue 中使用單元格模板還要簡單。僅需聲明模板字符串，就可以在其中放置 HTML 元素，甚至綁定表達(dá)式，而這些表達(dá)式將由 WijmoJS 的 glbz 方法解析并呈現(xiàn)在單元格中。

同樣是 “國家/地區(qū)”列中呈現(xiàn)標(biāo)志圖像的示例代碼，相比于 Vue 和 React 框架，更加清爽、簡單：

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

針對(duì)表格組件（FlexGrid）的更新

FlexGrid 多列排序

FlexGrid 依賴于 CollectionView 類對(duì)數(shù)據(jù)進(jìn)行排序。此前，WijmoJS 表格組件中的 allowSorting 屬性是一個(gè)布爾值，它用來確保用戶是否可以通過單擊單元格的標(biāo)題來對(duì)列進(jìn)行排序，該屬性的機(jī)制僅允許用戶同時(shí)對(duì)單個(gè)列進(jìn)行排序。

在 WijmoJS 的新版本中，allowSorting 屬性被擴(kuò)展為以下屬性的集合（不單單是布爾類型）：

• AllowSorting.None：用戶無法通過單擊列標(biāo)題來對(duì)列進(jìn)行排序，這與在先前版本中將 allowSorting 設(shè)置為 false 的表現(xiàn)相同。

• AllowSorting.SingleColumn：用戶可以對(duì)單個(gè)列進(jìn)行排序。單擊列標(biāo)題可對(duì)該列進(jìn)行排序或翻轉(zhuǎn)排序的方向（升序、降序）。 使用 Ctrl + Click 即可刪除排序，這與在先前版本中將 allowSorting 設(shè)置為 true 的表現(xiàn)相同。

• AllowSorting.MultiColumn：用戶可以對(duì)多列進(jìn)行排序。單擊列標(biāo)題可對(duì)該列進(jìn)行排序或翻轉(zhuǎn)排序的方向（升序、降序）。使用 Ctrl + Click 即可刪除該列的排序， Ctrl + Shift + Click ，即可刪除所有排序狀態(tài)。

在多列排序時(shí)，列標(biāo)題旁邊的箭頭顯示了當(dāng)前列的排序順序：

FlexGrid 凍結(jié)列

FlexGrid 支持通過代碼凍結(jié)行和列，但在此之前，從未公布過用于控制此功能的 UI。

在本次更新中，WijmoJS 添加了 allowPinning 屬性，該屬性可將圖釘（pin 字形）添加到列標(biāo)題中，通過單擊圖釘可實(shí)現(xiàn)凍結(jié)或取消凍結(jié)列：

FlexGrid 全文搜索

FlexGrid 支持使用 FlexGridFilter 組件，實(shí)現(xiàn)基于列的類似 Excel 那樣的過濾方式。

在本次更新中，WijmoJS 添加了全新的 WijmoJS.grid.search 模塊，該模塊帶有一個(gè) FlexGridSearch 控件，該控件提供了全文本搜索/過濾器界面。

當(dāng)用戶在 FlexGridSearch 控件鍵入數(shù)據(jù)時(shí)，它將根據(jù)搜索文本過濾項(xiàng)目，自動(dòng)突出顯示匹配項(xiàng)，已達(dá)到全文搜索的目的：

如上圖所示，F(xiàn)lexGridSearch 控件可以與 FlexGridFilter 組件一起使用。

轉(zhuǎn)置表格

在常規(guī)表格中，同一項(xiàng)目在一行內(nèi)顯示，項(xiàng)目的屬性在同一列中顯示。

而在轉(zhuǎn)置表格中，每個(gè)項(xiàng)目變成由同一列來表示，行顯示的是項(xiàng)目屬性。

為了實(shí)現(xiàn)上述需求，WijmoJS 添加了一個(gè)帶有 TransposedGrid 控件的模塊 —— Wijmo.grid.transposed，其中數(shù)據(jù)項(xiàng)目顯示為列，其屬性顯示為行。

即便此前我們已經(jīng)可以通過 FlexGrid 的 API 創(chuàng)建類似的轉(zhuǎn)置視圖，但通過 TransposedGrid 控件，將使這項(xiàng)工作變得更加容易。

保存 CSV 文件

FlexGrid 支持將表格中的數(shù)據(jù)保存為其他格式，如 CSV。

在本次更新中，WijmoJS 添加了兩個(gè)功能，使保存 CSV 文件變得更加輕松：

• 在 WijmoJS 中添加了 saveFile 方法，可以直接通過該方法保存 CSV 文件，而不必一遍又一遍地復(fù)制相同的代碼。

• 表格組件（Grid）的 getClipString 方法現(xiàn)在加入了一個(gè) options 參數(shù)，該參數(shù)使您可以精確地指定生成剪輯字符串的方式。

通過上述更改，您可以使用兩行代碼保存 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：使用默認(rèn)選項(xiàng)（制表符作為單元格分隔符，帶格式的/可見的/未引用的單元格），執(zhí)行復(fù)制/粘貼到剪貼板時(shí)內(nèi)部使用的格式。

• ClipStringOptions.CSV：使用逗號(hào)作為單元格分隔符（CSV 格式），這也是導(dǎo)出 CSV 文件時(shí)的默認(rèn)格式。

• ClipStringOptions.QuoteAll：引用所有單元格，將所有單元格都用引號(hào)引起來，而不是僅對(duì)包含逗號(hào)和引號(hào)的單元格，這項(xiàng)改動(dòng)將使輸出文件更易于解析。

• ClipStringOptions.SkipMerged：跳過已合并的單元格（如 Excel 一般）。在某些情況下，這使得輸出文件更易于閱讀。

• ClipStringOptions.Unformatted：導(dǎo)出未格式化的值。與僅保存格式化的值相反，此格式保留了數(shù)值的全部精度。

• ClipStringOptions.InvisibleRows：在輸出中包括不可見和折疊的行（默認(rèn)情況下，不包括不可見和折疊的行）。

• ClipStringOptions.InvisibleColumns：在輸出中包括不可見的列（默認(rèn)情況下，不包括不可見列）。

• ClipStringOptions.InvisibleCells：在輸出中包括不可見的單元格。

更多 FlexGrid 增強(qiáng)功能

可折疊列組：以聲明的方式創(chuàng)建可折疊列組。通過將 columns 屬性（或 columnGroups 屬性）設(shè)置為包含列定義的數(shù)組來完成，其中定義包含子列的“columns”集合。

添加了靜態(tài)屬性—— defaultTypeWidth，該屬性允許根據(jù)自動(dòng)生成的網(wǎng)格列的數(shù)據(jù)類型來指定默認(rèn)寬度。

改進(jìn)的剪貼板功能：添加了 copyHeaders 屬性，該屬性可讓指定在將數(shù)據(jù)復(fù)制到剪貼板時(shí)，是否應(yīng)包含行標(biāo)題或列標(biāo)題。

RowDetail 凍結(jié)單元格：允許單元格明細(xì)跨越凍結(jié)邊界。

針對(duì)多行網(wǎng)絡(luò)（MultiRow）的增強(qiáng)

MultiRow 聚合組：添加了 multiRowGroupHeaders 屬性，該屬性允許標(biāo)題具有多個(gè)標(biāo)題行（適用于顯示聚合）。

MultiRow 列標(biāo)題布局：添加了 headerLayoutDefinition 屬性，該屬性可讓您定義列標(biāo)題的自定義布局。

圖表組件（Chart）加入階梯圖

StepLine Charts（階梯圖）常用來顯示特定時(shí)間點(diǎn)的變化，它們對(duì)于查看值隨時(shí)間變化的大小十分有用。

WijmoJS 在 FlexChart 圖表組件中添加了階梯圖、StepSymbols 和 StepArea 等圖表類型。

CollectionView 過濾器增強(qiáng)

WijmoJS 添加了包含過濾器功能數(shù)組的 filters 屬性，該屬性可以鏈接具有多個(gè)獨(dú)立過濾器功能的過濾器。

產(chǎn)品易用性提升

WijmoJS 的信息提示在本次更新中做了重大改進(jìn)，這些改進(jìn)將使 WijmoJS 更易于使用，并且?guī)椭_發(fā)者更輕松地找到代碼中的錯(cuò)誤。

您可以在回調(diào)函數(shù)（以前只是通用的 Any 類型）中看到這些提示：

WijmoJS 更多增強(qiáng)點(diǎn)：

• 將信息提示添加到了 “any”類型的多個(gè)回調(diào)函數(shù)和屬性中。

• 向事件類的發(fā)送方和參數(shù)添加了通用類型。

• 為 CollectionView 和 ObservableArray 類添加了通用類型，可通過以下代碼實(shí)例化 Customer 對(duì)象：var cv = new CollectionView（data）; var customer = cv.currentItem; // customer是Customer的一個(gè)實(shí)例

• 提供了編譯時(shí)錯(cuò)誤檢查和 IntelliSense，確保開發(fā)者可以更快地編寫更好的代碼。

想要購買WijmoJS 正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊