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

點(diǎn)擊下載SpreadJS最新試用版

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

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

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

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

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

可定制的選項(xiàng)包括：

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

在系列的dataLabels選項(xiàng)中設(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. 保留圖表導(dǎo)入標(biāo)志

使用標(biāo)志，用戶可以保留 SpreadJS 當(dāng)前未支持的 Excel 圖表類型，以便于從SpreadJS中導(dǎo)出。

啟用該標(biāo)志，SpreadJS當(dāng)前未支持的圖表類型將提示“不支持的圖表類型”。當(dāng)然，也可以根據(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 可以在排序時(shí)按行和列分組。

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

未排序狀態(tài)：

排序后：

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

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

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

});

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

未排序：

排序后：

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

通過在排序時(shí)將ignoreHidden選項(xiàng)設(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)整大小或移動(dòng)形狀設(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)是形狀對(duì)象的標(biāo)識(shí)符，可用于調(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);

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

使用ViewZooming和ViewZoomed事件干預(yù)縮放過程，可以更改或擴(kuò)展 SpreadJS 的縮放功能，這樣可以確保僅將表單縮放至某個(gè)特定比例。

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

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可以自定義滾動(dòng)條以適合應(yīng)用程序的不同要求。

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

10. ClearPending 按范圍變化

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

這個(gè)功能可以清除當(dāng)前工作表中指定范圍內(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不僅增強(qiáng)了其圖表、排序、形狀等功能，還針對(duì)重要的產(chǎn)品資源學(xué)習(xí)指南，增加了React、Vue、Angular框架的示例代碼，可以幫助前端開發(fā)人員更快的在項(xiàng)目中應(yīng)用，實(shí)現(xiàn)跨平臺(tái)開發(fā)。