下載SpreadJS最新試用版

前言 | 問題背景

樣式問題是每一個(gè)Spread JS的用戶都會(huì)接觸，但大部分人都理解不全面的一個(gè)功能點(diǎn)。尤其是剛接觸Spread JS的新人，對(duì)Style的使用都或多或少有一些問題，由此導(dǎo)致了性能低下、樣式混亂、無法實(shí)現(xiàn)預(yù)期功能等結(jié)果。本文就針對(duì)SpreadJS的樣式問題進(jìn)行一些介紹和討論。

本文基于SpreadJS V12版本

SpreadJS 中的 Style 簡介

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

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

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

Style還有更高級(jí)的用法，比如在自定義單元格類型時(shí)，paint方法中可以動(dòng)態(tài)指定當(dāng)前單元格的樣式；或者與條件格式結(jié)合使用，自動(dòng)為符合條件的單元格指定樣式；以及table樣式等等。SpreadJS的樣式是一個(gè)很基礎(chǔ)但又較難全面掌握的知識(shí)點(diǎn)，本文旨在讓剛接觸SpreadJS的伙伴們能夠較為系統(tǒng)地認(rèn)識(shí)Style，因此不會(huì)涉及更高級(jí)的用法，關(guān)于Style的高級(jí)應(yīng)用部分，未來會(huì)發(fā)布相關(guān)的文章進(jìn)行講解。

學(xué)習(xí)指南示例分析

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

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

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

樣式優(yōu)先級(jí)：單元格 > 行 > 列 > 表

如圖所示：

（圖1：樣式優(yōu)先級(jí)圖示)

我為這個(gè)表單設(shè)置了默認(rèn)樣式，背景色為淺藍(lán)（lightblue），第5行設(shè)置綠色，第C、E列設(shè)置了黃色，可以發(fā)現(xiàn)樣式的作用方式嚴(yán)格依照上述的優(yōu)先級(jí)執(zhí)行。

代碼Tips：怎樣設(shè)置表樣式。

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

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

注意，以上描述的優(yōu)先級(jí)概念，指的是當(dāng)多個(gè)級(jí)別的樣式中設(shè)置了相同的樣式屬性，不同樣式的相同屬性發(fā)生了沖突時(shí)，會(huì)按照優(yōu)先級(jí)順序，優(yōu)先顯示級(jí)別高的樣式屬性。而當(dāng)多個(gè)級(jí)別的樣式中設(shè)置了不同的樣式屬性時(shí)，例如，行樣式中設(shè)置了字體，列樣式設(shè)置了背景色、單元格樣式中又設(shè)置了對(duì)齊方式，此時(shí)單元格的樣式會(huì)綜合多級(jí)別的樣式來展示。

那么這時(shí)就會(huì)產(chǎn)生一個(gè)問題，當(dāng)我們調(diào)用sheet.getStyle(row, col) 時(shí)，拿到的可能不是一個(gè)單元格的真實(shí)樣式。Spread JS的Worksheet提供了一個(gè)方法來解決這個(gè)問題：getActualStyle，

這個(gè)方法會(huì)獲取到當(dāng)前單元格（或行、列）的實(shí)際樣式。

用戶常見問題分析

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

A：這是一個(gè)很典型的用例，當(dāng)用戶想利用表單保護(hù)來控制表單權(quán)限時(shí)通常會(huì)這么做，如果您仔細(xì)看了前面的內(nèi)容，應(yīng)該有思路了吧？很簡單，我們可以通過設(shè)置Worksheet的默認(rèn)Style來實(shí)現(xiàn)這個(gè)功能。更為方便的是，這個(gè)設(shè)置與單元格樣式不沖突，我們可以很方便地設(shè)置單元格鎖定來保護(hù)表單中某幾個(gè)單元格。

代碼Tips：怎樣設(shè)置表默認(rèn)為非鎖定狀態(tài)。

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

Q：怎么快速高效地給一個(gè)指定區(qū)域設(shè)置樣式？

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

Q：我想在某個(gè)區(qū)域設(shè)置一個(gè)提醒色，比如當(dāng)用戶鼠標(biāo)移入時(shí)，這個(gè)區(qū)域會(huì)根據(jù)區(qū)域內(nèi)數(shù)據(jù)的內(nèi)容來變色，數(shù)字顯示紅色，文本顯示綠色等。

A：我們可以用自定義單元格類型的功能來輕松實(shí)現(xiàn)！

購買SpreadJS正版授權(quán)，請(qǐng)點(diǎn)擊“”喲！