spreadjs自學教程?樣式問題是每一個SpreadJS的用戶都會接觸，但大部分人都理解不全面的一個功能點尤其是剛接觸Spread JS的新人，對Style的使用都或多或少有一些問題，由此導緻了性能低下、樣式混亂、無法實現預期功能等結果本文就針對SpreadJS的樣式問題進行一些介紹和讨論，今天小編就來聊一聊關于spreadjs自學教程?接下來我們就一起去研究一下吧!

spreadjs自學教程

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

本文基于SpreadJS V12版本，請大家學習前先升級産品版本。

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就獲得了“父類”的所有設置。

樣式優先級圖示

我為這個表單設置了默認樣式，背景色為淺藍（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：這也是一個提問頻率很高的問題，SpreadJS怎麼能沒有解決方案呢！我們可以參考CellRange這個類的API。

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

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

A：嗯，這是一個有深度的問題，但是也難不倒SpreadJS！我們可以用自定義單元格類型的功能來輕松實現！但是本篇文章由于篇幅和主題限制，先不過多涉及，後續我們會推出針對自定義單元格的深入講解，可以期待一下哦~

關于葡萄城

賦能開發者！葡萄城集團成立于 1980 年，是全球領先的集開發工具、商業智能解決方案、管理系統設計工具于一身的軟件和服務提供商。西安葡萄城是其在中國的分支機構，面向全球市場提供軟件研發服務，并為中國企業的信息化提供國際先進的開發工具、軟件和研發咨詢服務。葡萄城的控件和軟件産品在國内外屢獲殊榮，在全球被數十萬家企業、學校和政府機構廣泛應用。

,