半岛外围网上直营

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