歡迎您光臨本站 註冊首頁

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框架的示例程式碼,可以幫助前端開發人員更快的在專案中應用,實現跨平臺開發。


[admin ]

來源:OsChina
連結:https://www.oschina.net/news/117917/spreadjs-13-0-update-2-released
SpreadJS V13.0 Update2 釋出,增強產品功能、新增 Vue 等框架的示例程式碼已經有19次圍觀

http://coctec.com/news/all/show-post-248846.html