SpreadJS 是一款基于 HTML5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，憑借其 “高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受以華為、蘇寧易購、天弘基金等為代表的企業用戶青睞。SpreadJS 為用戶帶來親切的 Excel 使用體驗的同時，滿足 Web Excel 組件開發、表格文檔協同編輯、數據填報、Excel 類報表設計等業務場景，極大降低了企業研發成本和項目交付風險。

點擊下載SpreadJS最新試用版

設置樣式

你可以使用 Style 類創建對象來定制表格的樣式，你也可以通過 Style 來定義自己的名稱樣式。

你可以在 Style 中設置邊框，顏色和字體等屬性；Style 可以應用到單元格，行，列或者表格中。
Style 中的屬性是有優先級的。優先級從高到低排序為：

1. 給單元格設置的 Style；
2. 給行設置的 Style；
3. 給列設置的 Style；
4. 表格的默認樣式。

表格有一個默認的樣式，其優先級最低。
使用setStyle方法來設置樣式. 在第一個參數和第二個參數中傳入 -1 可以給整行或者整列設置 Style。
你可以使用addNamedStyle方法來創建自己的名稱樣式。你可以修改或刪除名稱樣式。使用setStyleName方法來給單元格設置名稱樣式，在第一個參數和第二個參數中傳入 -1 可以給整行或者整列設置名稱樣式。
名稱樣式可以提高樣式的重用性。在 JSON 數據存儲和Excel 導入導出中，使用名稱樣式可以減少數據傳輸，提高效率。

如下圖所示，B2 單元格的樣式被更改了。

示例代碼

以下代碼使用setStyle方法來給單元格設置樣式。

var style = new GC.Spread.Sheets.Style();
style.backColor = "red";
style.borderLeft = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderTop = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderRight = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderBottom = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
//row
//activeSheet.setStyle(1,-1,style,GC.Spread.Sheets.SheetArea.viewport);
//column
//activeSheet.setStyle(-1,2,style,GC.Spread.Sheets.SheetArea.viewport);

JavaScript

示例代碼

以下代碼使用了setDefaultStyle方法。

//setDefaultStyle
activeSheet.setRowCount(5, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setColumnCount(5, GC.Spread.Sheets.SheetArea.viewport);
//Set the default styles.
var defaultStyle = new GC.Spread.Sheets.Style();
defaultStyle.backColor = "LemonChiffon";
defaultStyle.foreColor = "Red";
defaultStyle.formatter = "0.00";
defaultStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
defaultStyle.borderLeft = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium);
defaultStyle.borderTop = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium);
defaultStyle.borderRight = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium);
defaultStyle.borderBottom = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium);
activeSheet.setDefaultStyle(defaultStyle, GC.Spread.Sheets.SheetArea.viewport);
var rowCount = activeSheet.getRowCount();
var colCount = activeSheet.getColumnCount();
for(var i = 0; i < rowCount; i++){ for(var j = 0; j < colCount; j++){ activeSheet.setValue(i, j, i+j, GC.Spread.Sheets.SheetArea.viewport); } }

示例代碼

以下代碼給單元格，行和列分別設置了樣式。

activeSheet.setRowCount(15);
activeSheet.setColumnCount(14);
var ns = GC.Spread.Sheets;
var style = activeSheet.getDefaultStyle();
style.backColor = "lightgray";
style.foreColor = "purple";
style.borderLeft = new ns.LineBorder("red", ns.LineStyle.hair);
style.borderTop = new ns.LineBorder("red", ns.LineStyle.hair);
style.borderRight = new ns.LineBorder("red", ns.LineStyle.hair);
style.borderBottom = new ns.LineBorder("red", ns.LineStyle.hair);
var cell = activeSheet.getRange(3, 3, 6, 6);
cell.value(10);
cell.formatter("0.0%");
cell.backColor("lightgreen");
cell.borderLeft(new ns.LineBorder("gray", ns.LineStyle.double));
cell.borderTop(new ns.LineBorder("gray", ns.LineStyle.double));
cell.borderRight(new ns.LineBorder("gray", ns.LineStyle.double));
cell.borderBottom(new ns.LineBorder("gray", ns.LineStyle.double));
var row = activeSheet.getRange(2, -1, 8, -1);
row.backColor("lightblue");
row.borderLeft(new ns.LineBorder("green", ns.LineStyle.dashed));
row.borderRight(new ns.LineBorder("green", ns.LineStyle.dashed));
var col = activeSheet.getRange(-1, 2, -1, 8);
col.backColor("pink");
col.borderTop(new ns.LineBorder("blue", ns.LineStyle.dashed));
col.borderBottom(new ns.LineBorder("blue", ns.LineStyle.dashed));

JavaScript 示例代碼

以下代碼給多個單元格設置了樣式，并且點擊按鈕可以移除樣式。

 var namedStyle = new GC.Spread.Sheets.Style();
namedStyle.name = "style1";
namedStyle.backColor = "green";
activeSheet.addNamedStyle(namedStyle);
activeSheet.setStyleName(1, 1, "style1"); // cell(1,1)'s backColor is green.
activeSheet.setStyleName(2, 1, "style1");
  
var style = activeSheet.getNamedStyle("style1");
style.foreColor = "red";    // the namedStyle's foreColor is red.
activeSheet.repaint(); // the foreColor of the cell(1,1) and cell(2,1) is red.
activeSheet.getCell(1,1).value("test");
$("#button1").click(function () {
activeSheet.removeNamedStyle("style1");
    });