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

點(diǎn)擊下載SpreadJS最新試用版

設(shè)置樣式

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

你可以在 Style 中設(shè)置邊框，顏色和字體等屬性；Style 可以應(yīng)用到單元格，行，列或者表格中。
Style 中的屬性是有優(yōu)先級的。優(yōu)先級從高到低排序?yàn)椋?

1. 給單元格設(shè)置的 Style；
2. 給行設(shè)置的 Style；
3. 給列設(shè)置的 Style；
4. 表格的默認(rèn)樣式。

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

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

示例代碼

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

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

示例代碼

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

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 示例代碼

以下代碼給多個單元格設(shè)置了樣式，并且點(diǎn)擊按鈕可以移除樣式。

 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");
    });