SpreadJS V13.0 Update2 釋出，增強產品功能、新增 Vue 等框架的示例程式碼

SpreadJS 是一款基於 HTML5 的純前端表格控制元件，相容 450 種以上的 Excel 公式，具備“高效能、跨平臺、與 Excel 高度相容”的產品特性，被中國軟體行業協會認定為“中國優秀軟體產品”。

伴隨著SpreadJS V13.0 Update2 的正式釋出，其圖表、排序、形狀等功能進一步增強。同時，針對重要的產品資源，SpreadJS還在『學習指南』中增加了React、Vue、Angular框架的示例程式碼，具體內容見下方說明：

• 在『學習指南』中增加 React、Vue、Angular 框架示例程式碼
• 圖表系列資料標籤定製
• 保留圖表匯入標誌
• 按組排序
• 排序時忽略隱藏的行
• 形狀允許旋轉
• 顯示/隱藏形狀控制代碼
• 檢視放大
• 捲軸自定義
• ClearPending按範圍變化
• RangeChanged事件isUndo屬性

1. 在『學習指南』中增加React、Vue、Angular 框架示例程式碼

為了讓使用者更方便的在框架中嵌入 SpreadJS 表格控制元件，本次更新，在 SpreadJS 學習指南的所有示例中，增加了三大框架的對應程式碼，如下圖所示：

『學習指南』地址

2. 圖表系列資料標籤定製

在 SpreadJS 中，可以根據樣式自定義資料標籤（針對圖表中的系列），以使其與應用程式的外觀和主題更加匹配。

可定製的選項包括：

• 分隔器
• 背景色
• BackColor 透明度
• 邊框顏色
• 邊框寬度
• BorderColor 透明度

在系列的dataLabels選項中設定的示例程式碼如下：

 var series = chart.series().get(1);

     series.dataLabels= {

         showValue : false,

         showSeriesName: true,

         showCategoryName: false,

         showPercentage:false,

         position: GC.Spread.Sheets.Charts.DataLabelPosition.Center,

         color: "white",

         backColor: "red",

         backColorTransparency: 0.25,

         borderColor: "green",

         borderWidth: 2

     };

 chart.series().set(1, series);

 

結果如下圖：

線上示例

3. 保留圖表匯入標誌

使用標誌，使用者可以保留 SpreadJS 當前未支援的 Excel 圖表型別，以便於從SpreadJS中匯出。

啟用該標誌，SpreadJS當前未支援的圖表型別將提示“不支援的圖表型別”。當然，也可以根據業務需要，修改提示內容，如直接提示不支援的特定圖表型別：

 sheet.charts.preserveUnsupportedChart(true, function(chart, chartHost){

       var paintElement= document.createElement('div');

       var type= chart.chartType();

       paintElement.innerHTML = 'Unsupported Chart Type:' + type;

       chartHost.appendChild(paintElement);

 })

線上示例

4. 按組排序

SpreadJS 可以在排序時按行和列分組。

目前，SpreadJS支援的排序方式不僅僅為平面排序，而是在排序時，對組中的專案同樣執行遞迴排序，這保證了每個組的內容和整個工作表，均符合整體排序規則，如下所示：

未排序狀態：

排序後：

要想在範圍排序中使用組排序，只需在RangeSorting事件中設定即可：

 spread.bind(GC.Spread.Sheets.Events.RangeSorting, function (e, info) {

     info.groupSort = GC.Spread.Sheets.GroupSort.full;

 });

線上示例

5. 排序忽略隱藏的行

在對具有隱藏行的資料進行排序時，SpreadJS 的表現如Excel一樣，會忽略隱藏行，不將其包括在排序內：

未排序：

排序後：

在上述情況下，A2:A5被隱藏，這部分資料將不參與排序。

透過在排序時將ignoreHidden選項設定為true啟用此行為，如在sortRange方法或在RangeSorting事件中設定：

 sheet.sortRange(0, 0, 10, 1, true, [{index:0, ascending: true}], {ignoreHidden: false});

 sheet.bind(GC.Spread.Sheets.Events.RangeSorting, function (e, info) {

     info.ignoreHidden = true;

 });

線上示例

6. 允許形狀旋轉

SpreadJS透過呼叫allowResize和allowMove 介面，可以在應用程式中啟用或禁用調整大小或移動形狀設定。本次更新，SpreadJS又添加了用於控制形狀旋轉的API —— allowRotate：

 var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);

 heart.allowRotate(false);

線上示例

7.顯示/隱藏形狀控制代碼

控制代碼(Handle)是形狀物件的識別符號，可用於調整形狀大小、旋轉、顯示/隱藏。

透過將showHandle函式設定為false，可以隱藏控制代碼：

 var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);

 heart.showHandle(false);

請注意：如果將形狀的allowResize或allowRotate屬性設定為true，則使用者仍能夠與該形狀進行互動，他們只是看不到控制代碼。

8. 檢視放大、控制縮放

使用ViewZooming和ViewZoomed事件幹預縮放過程，可以更改或擴充套件 SpreadJS 的縮放功能，這樣可以確保僅將表單縮放至某個特定比例。

這些事件就像其他工作表事件一樣被繫結在工作表上：

 activeSheet.bind(GC.Spread.Sheets.Events.ViewZooming, function (e, info) {

     if (info.newZoomFactor >= 2) {

         info.newZoomFactor = 2;

     }

 });

 activeSheet.bind(GC.Spread.Sheets.Events.ViewZoomed, function (e, info) {

     alert("Zoom (" + info.newZoomFactor + ")");

 });

線上示例

9. 捲軸自定義

SpreadJS可以自定義捲軸以適合應用程式的不同要求。

透過將捲軸設定為“移動”，可讓開發人員透過CSS程式碼自定義捲軸樣式。

線上示例

10. ClearPending 按範圍變化

現在，clearPendingChanges API將作為可選引數用於 SpreadJS 的單元格範圍。

這個功能可以清除當前工作表中指定範圍內的所有髒資料，最主要的應用場景是：在單元格發生更改後，在不使用撤消功能的情況下，直接還原已修改的操作。

線上示例

11. RangeChanged 事件支援isUndo屬性

SpreadJS  的 RangeChanged 事件已支援isUndo屬性，開發人員可以藉此區分出範圍內的正常操作和撤消操作，可與事件（如CellChanged、RowChanged等）相匹配。

使用此功能，無需程式碼更改，只需更改執行範圍的事件即可。

以上就是純前端表格控制元件 SpreadJS V13.0 Update2 的主要新特性內容，本次釋出更新，SpreadJS不僅增強了其圖表、排序、形狀等功能，還針對重要的產品資源『學習指南』，增加了React、Vue、Angular框架的示例程式碼，可以幫助前端開發人員更快的在專案中應用，實現跨平臺開發。