下載SpreadJS最新試用版

前言 | 問題背景

樣式問題是每一個Spread JS的用戶都會接觸，但大部分人都理解不全面的一個功能點。尤其是剛接觸Spread JS的新人，對Style的使用都或多或少有一些問題，由此導致了性能低下、樣式混亂、無法實現預期功能等結果。本文就針對SpreadJS的樣式問題進行一些介紹和討論。

本文基于SpreadJS V12版本

SpreadJS 中的 Style 簡介

GC.Spread.Sheets.Style是SpreadJS樣式類的完整名稱，其中包含了很多的屬性，例如：字體、前景色、背景色、鎖定狀態、對齊方式等等。

Style中定義了豐富的屬性，用來定義各方面的樣式。Style作用的對象也不僅限于單元格，而是可以設置到行(Row)、列(Column)甚至表(Worksheet)上。Spread JS在這里并沒有完全照搬Excel的設計方式，而是采用了更為靈活強大的分級作用的設計，可以為前端開發者提供更高效更靈活的樣式支持。

此外，Style還采用了復用和繼承的概念來設計。例如Style支持一個name的屬性，同時還支持parentName的屬性，當我們設置好一個style實例時，可以為其起名，并添加到Worksheet中。在Worksheet上支持“樣式表”的維護，可以采用addNamedStyle方法來將一個命名的style實例添加到樣式表中。parentName可以指定一個“父類”樣式實例，當指定了“parentName”后，當前style就獲得了“父類”的所有設置。

Style還有更高級的用法，比如在自定義單元格類型時，paint方法中可以動態指定當前單元格的樣式；或者與條件格式結合使用，自動為符合條件的單元格指定樣式；以及table樣式等等。SpreadJS的樣式是一個很基礎但又較難全面掌握的知識點，本文旨在讓剛接觸SpreadJS的伙伴們能夠較為系統地認識Style，因此不會涉及更高級的用法，關于Style的高級應用部分，未來會發布相關的文章進行講解。

學習指南示例分析

先看“描述”標簽頁。描述中先分別列舉了單元格、行、列的樣式設置方式，如下所示：

//set style to cell.
sheet.setStyle(5, 5, style, GC.Spread.Sheets.SheetArea.viewport); 
//set style to row.
sheet.setStyle(5, -1, style, GC.Spread.Sheets.SheetArea.viewport); 
//set style to column.
sheet.setStyle(-1, 5, style, GC.Spread.Sheets.SheetArea.viewport);

那么問題來了，當一個單元格既設置了單元格樣式，其所在的行、列也都設置了樣式時，展示結果到底應該是怎樣的呢？描述中緊跟著就做出了解答：樣式在不同層級結構中具有不同的優先級，其中單元格 > 行 > 列。補充一點，Worksheet也有表單級別的樣式，可以通過sheet.getDefaultStyle()獲取到，這個表單級別的樣式優先級自然是最低的，因此總結如下：

樣式優先級：單元格 > 行 > 列 > 表

如圖所示：

（圖1：樣式優先級圖示)

我為這個表單設置了默認樣式，背景色為淺藍（lightblue），第5行設置綠色，第C、E列設置了黃色，可以發現樣式的作用方式嚴格依照上述的優先級執行。

代碼Tips：怎樣設置表樣式。

//獲取表默認樣式
var spread = GC.Spread.Sheets.findControl(“ss”).
var sheet = spread.getActiveSheet();
var sheetStyle = sheet.getDefaultStyle();

//修改并設置表的默認樣式.
sheetStyle.backColor = “lightBlue”;
sheet.setDefaultStyle(sheetStyle);

注意，以上描述的優先級概念，指的是當多個級別的樣式中設置了相同的樣式屬性，不同樣式的相同屬性發生了沖突時，會按照優先級順序，優先顯示級別高的樣式屬性。而當多個級別的樣式中設置了不同的樣式屬性時，例如，行樣式中設置了字體，列樣式設置了背景色、單元格樣式中又設置了對齊方式，此時單元格的樣式會綜合多級別的樣式來展示。

那么這時就會產生一個問題，當我們調用sheet.getStyle(row, col) 時，拿到的可能不是一個單元格的真實樣式。Spread JS的Worksheet提供了一個方法來解決這個問題：getActualStyle，

這個方法會獲取到當前單元格（或行、列）的實際樣式。

用戶常見問題分析

Q：在鎖定Worksheet表單后，我想讓表單中的所有單元格默認可以編輯，怎么快速設置？

A：這是一個很典型的用例，當用戶想利用表單保護來控制表單權限時通常會這么做，如果您仔細看了前面的內容，應該有思路了吧？很簡單，我們可以通過設置Worksheet的默認Style來實現這個功能。更為方便的是，這個設置與單元格樣式不沖突，我們可以很方便地設置單元格鎖定來保護表單中某幾個單元格。

代碼Tips：怎樣設置表默認為非鎖定狀態。

//獲取表默認樣式
var spread = GC.Spread.Sheets.findControl(“ss”).
var sheet = spread.getActiveSheet();
var sheetStyle = sheet.getDefaultStyle();
//修改并設置表的默認樣式locked為false.
sheetStyle.locked = false;
sheet.setDefaultStyle(sheetStyle);

Q：怎么快速高效地給一個指定區域設置樣式？

A：我們可以參考CellRange這個類的API。可以看到API提供了全部的有關Style的方法。要獲取一個CellRange實例也很簡單，參考Worksheet的getRange方法API。

Q：我想在某個區域設置一個提醒色，比如當用戶鼠標移入時，這個區域會根據區域內數據的內容來變色，數字顯示紅色，文本顯示綠色等。

A：我們可以用自定義單元格類型的功能來輕松實現！

購買SpreadJS正版授權，請點擊“”喲！