SpreadJS是一款基于HTML5的純前端表格控件，兼容450種以上的Excel公式，具備“高性能、跨平臺、與 Excel 高度兼容”的產(chǎn)品特性，備受華為、蘇寧易購、天弘基金、遠光軟件等各領(lǐng)域龍頭企業(yè)的青睞，并被中國軟件行業(yè)協(xié)會認定為“中國優(yōu)秀軟件產(chǎn)品”。

點擊下載SpreadJS最新試用版

伴隨著SpreadJS V13.0 Update2 的正式發(fā)布，其圖表、排序、形狀等功能進一步增強。同時，針對重要的產(chǎn)品資源，SpreadJS還在學習指南中增加了React、Vue、Angular框架的示例代碼，具體內(nèi)容見下方說明：

• 在學習指南中增加 React、Vue、Angular 框架示例代碼
• 圖表系列數(shù)據(jù)標簽定制
• 保留圖表導入標志
• 按組排序
• 排序時忽略隱藏的行
• 形狀允許旋轉(zhuǎn)
• 顯示/隱藏形狀句柄
• 查看放大
• 滾動條自定義
• ClearPending按范圍變化
• RangeChanged事件isUndo屬性

為了讓用戶更方便的在框架中嵌入 SpreadJS 表格控件，本次更新增加了三大框架的對應(yīng)代碼，如下圖所示：

2. 圖表系列數(shù)據(jù)標簽定制

在 SpreadJS 中，可以根據(jù)樣式自定義數(shù)據(jù)標簽（針對圖表中的系列），以使其與應(yīng)用程序的外觀和主題更加匹配。

可定制的選項包括：

• 分隔器
• 背景色
• BackColor 透明度
• 邊框顏色
• 邊框?qū)挾?
• BorderColor 透明度

在系列的dataLabels選項中設(shè)置的示例代碼如下：

**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);

結(jié)果如下圖：

3. 保留圖表導入標志

使用標志，用戶可以保留 SpreadJS 當前未支持的 Excel 圖表類型，以便于從SpreadJS中導出。

啟用該標志，SpreadJS當前未支持的圖表類型將提示“不支持的圖表類型”。當然，也可以根據(jù)業(yè)務(wù)需要，修改提示內(nèi)容，如直接提示不支持的特定圖表類型：

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

})

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

目前，SpreadJS支持的排序方式不僅僅為平面排序，而是在排序時，對組中的項目同樣執(zhí)行遞歸排序，這保證了每個組的內(nèi)容和整個工作表，均符合整體排序規(guī)則，如下所示：

未排序狀態(tài)：

排序后：

要想在范圍排序中使用組排序，只需在RangeSorting事件中設(shè)置即可：

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

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

});

在對具有隱藏行的數(shù)據(jù)進行排序時，SpreadJS 的表現(xiàn)如Excel一樣，會忽略隱藏行，不將其包括在排序內(nèi)：

未排序：

排序后：

在上述情況下，A2:A5被隱藏，這部分數(shù)據(jù)將不參與排序。

通過在排序時將ignoreHidden選項設(shè)置為true啟用此行為，如在sortRange方法或在RangeSorting事件中設(shè)置：

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;

});

SpreadJS通過調(diào)用allowResize和allowMove 接口，可以在應(yīng)用程序中啟用或禁用調(diào)整大小或移動形狀設(shè)置。本次更新，SpreadJS又添加了用于控制形狀旋轉(zhuǎn)的API —— allowRotate：

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

heart.allowRotate(false);

句柄(Handle)是形狀對象的標識符，可用于調(diào)整形狀大小、旋轉(zhuǎn)、顯示/隱藏。

通過將showHandle函數(shù)設(shè)置為false，可以隱藏句柄：

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

heart.showHandle(false);

請注意：如果將形狀的allowResize或allowRotate屬性設(shè)置為true，則用戶仍能夠與該形狀進行交互，他們只是看不到句柄。

使用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 + ")");
});

SpreadJS可以自定義滾動條以適合應(yīng)用程序的不同要求。

通過將滾動條設(shè)置為“移動”，可讓開發(fā)人員通過CSS代碼自定義滾動條樣式。

10. ClearPending 按范圍變化

現(xiàn)在，clearPendingChanges API將作為可選參數(shù)用于 SpreadJS 的單元格范圍。

這個功能可以清除當前工作表中指定范圍內(nèi)的所有臟數(shù)據(jù)，最主要的應(yīng)用場景是：在單元格發(fā)生更改后，在不使用撤消功能的情況下，直接還原已修改的操作。

SpreadJS 的 RangeChanged 事件已支持isUndo屬性，開發(fā)人員可以借此區(qū)分出范圍內(nèi)的正常操作和撤消操作，可與事件（如CellChanged、RowChanged等）相匹配。

使用此功能，無需代碼更改，只需更改執(zhí)行范圍的事件即可。

以上就是純前端表格控件 SpreadJS V13.0 Update2 的主要新特性內(nèi)容，本次發(fā)布更新，SpreadJS不僅增強了其圖表、排序、形狀等功能，還針對重要的產(chǎn)品資源學習指南，增加了React、Vue、Angular框架的示例代碼，可以幫助前端開發(fā)人員更快的在項目中應(yīng)用，實現(xiàn)跨平臺開發(fā)。