电子表格控件SpreadJS使用教程：如何通过Style类设置表格样式

您可以创建样式并将样式分配给单元格、行、列或表。还可以为 Spread.Sheets 控件设置主题。您可以设置当前主题，Excel的一个主题，bootstrap主题，或根据主题规则创建自定义的jQuery主题。本文就如何使用Style类自定义表格样式进行详细说明。

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

示例代码

以下代码使用了 setDefaultStyle 方法。

//setDefaultStyleactiveSheet.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);    }}

示例代码

以下代码给单元格，行和列分别设置了样式。

JavaScript：

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

<input type="button" id="button1" value="button1"/>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");    });

现在电子表格控件SpreadJS限时优惠！低至3490；企业版最高立减6000元。点击了解更多优惠！

如果你对我们的产品感兴趣或者有任何疑问，欢迎咨询在线客服>>

来源：慧都