表格控件SpreadJS使用教程：如何设置主题|附代码

SpreadJS是一款基于HTML5的纯前端表格控件，兼容450种以上的Excel公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性，备受华为、苏宁易购、天弘基金、远光软件等各领域龙头企业的青睐，并被中国软件行业协会认定为“中国优秀软件产品”。

SpreadJS最新试用版

您可以创建样式并将样式分配给单元格、行、列或表。还可以为 Spread.Sheets 控件设置主题。您可以设置当前主题，Excel的一个主题，bootstrap主题，或根据主题规则创建自定义的jQuery主题。

使用主题

你可以给单元格，列，行或者控件设置主题。也使用 themeFont方法来给单元格，行或者列设置如下主题。

示例代码

以下代码使用了 currentTheme 方法。

activeSheet.currentTheme("Metro");

示例代码

以下代码设置了主题颜色。

activeSheet.setColumnWidth(0, 22);activeSheet.setColumnWidth(1, 30);activeSheet.setColumnWidth(2, 22);activeSheet.getCell(1, 3, GC.Spread.Sheets.SheetArea.viewport).value("Theme Colors").themeFont("headings").hAlign(GC.Spread.Sheets.HorizontalAlign.center);activeSheet.addSpan(1, 3, 1, 10);activeSheet.getCell(2, 3, GC.Spread.Sheets.SheetArea.viewport).text("Background 1").themeFont("Body");activeSheet.getCell(2, 4, GC.Spread.Sheets.SheetArea.viewport).text("Text 1").themeFont("Body");activeSheet.getCell(2, 5, GC.Spread.Sheets.SheetArea.viewport).text("Background 2").themeFont("Body");activeSheet.getCell(2, 6, GC.Spread.Sheets.SheetArea.viewport).text("Text 2").themeFont("Body");activeSheet.getCell(2, 7, GC.Spread.Sheets.SheetArea.viewport).text("Accent 1").themeFont("Body");activeSheet.getCell(2, 8, GC.Spread.Sheets.SheetArea.viewport).text("Accent 2").themeFont("Body");activeSheet.getCell(2, 9, GC.Spread.Sheets.SheetArea.viewport).text("Accent 3").themeFont("Body");activeSheet.getCell(2, 10).text("Accent 4").themeFont("Body");activeSheet.getCell(2, 11).text("Accent 5").themeFont("Body");activeSheet.getCell(2, 12).text("Accent 6").themeFont("Body");activeSheet.getCell(3, 1).value("100").themeFont("Body");activeSheet.getCell(3, 3).backColor("Background 1");activeSheet.getCell(3, 4).backColor("Text 1");activeSheet.getCell(3, 5).backColor("Background 2");activeSheet.getCell(3, 6).backColor("Text 2");activeSheet.getCell(3, 7).backColor("Accent 1");activeSheet.getCell(3, 8).backColor("Accent 2");activeSheet.getCell(3, 9).backColor("Accent 3");activeSheet.getCell(3, 10).backColor("Accent 4");activeSheet.getCell(3, 11).backColor("Accent 5");activeSheet.getCell(3, 12).backColor("Accent 6");activeSheet.getCell(5, 1).value("80").themeFont("Body");activeSheet.getCell(5, 3).backColor("Background 1 80");activeSheet.getCell(5, 4).backColor("Text 1 80");activeSheet.getCell(5, 5).backColor("Background 2 80");activeSheet.getCell(5, 6).backColor("Text 2 80");activeSheet.getCell(5, 7).backColor("Accent 1 80");activeSheet.getCell(5, 8).backColor("Accent 2 80");activeSheet.getCell(5, 9).backColor("Accent 3 80");activeSheet.getCell(5, 10).backColor("Accent 4 80");activeSheet.getCell(5, 11).backColor("Accent 5 80");activeSheet.getCell(5, 12).backColor("Accent 6 80");activeSheet.getCell(6, 1).value("60").themeFont("Body");activeSheet.getCell(6, 3).backColor("Background 1 60");activeSheet.getCell(6, 4).backColor("Text 1 60");activeSheet.getCell(6, 5).backColor("Background 2 60");activeSheet.getCell(6, 6).backColor("Text 2 60");activeSheet.getCell(6, 7).backColor("Accent 1 60");activeSheet.getCell(6, 8).backColor("Accent 2 60");activeSheet.getCell(6, 9).backColor("Accent 3 60");activeSheet.getCell(6, 10).backColor("Accent 4 60");activeSheet.getCell(6, 11).backColor("Accent 5 60");activeSheet.getCell(6, 12).backColor("Accent 6 60");activeSheet.getCell(7, 1).value("40").themeFont("Body");activeSheet.getCell(7, 3).backColor("Background 1 40");activeSheet.getCell(7, 4).backColor("Text 1 40");activeSheet.getCell(7, 5).backColor("Background 2 40");activeSheet.getCell(7, 6).backColor("Text 2 40");activeSheet.getCell(7, 7).backColor("Accent 1 40");activeSheet.getCell(7, 8).backColor("Accent 2 40");activeSheet.getCell(7, 9).backColor("Accent 3 40");activeSheet.getCell(7, 10).backColor("Accent 4 40");activeSheet.getCell(7, 11).backColor("Accent 5 40");activeSheet.getCell(7, 12).backColor("Accent 6 40");activeSheet.getCell(8, 1).value("-25").themeFont("Body");activeSheet.getCell(8, 3).backColor("Background 1 -25");activeSheet.getCell(8, 4).backColor("Text 1 -25");activeSheet.getCell(8, 5).backColor("Background 2 -25");activeSheet.getCell(8, 6).backColor("Text 2 -25");activeSheet.getCell(8, 7).backColor("Accent 1 -25");activeSheet.getCell(8, 8).backColor("Accent 2 -25");activeSheet.getCell(8, 9).backColor("Accent 3 -25");activeSheet.getCell(8, 10).backColor("Accent 4 -25");activeSheet.getCell(8, 11).backColor("Accent 5 -25");activeSheet.getCell(8, 12).backColor("Accent 6 -25");activeSheet.getCell(9, 1).value("-50").themeFont("Body");activeSheet.getCell(9, 3).backColor("Background 1 -50");activeSheet.getCell(9, 4).backColor("Text 1 -50");activeSheet.getCell(9, 5).backColor("Background 2 -50");activeSheet.getCell(9, 6).backColor("Text 2 -50");activeSheet.getCell(9, 7).backColor("Accent 1 -50");activeSheet.getCell(9, 8).backColor("Accent 2 -50");activeSheet.getCell(9, 9).backColor("Accent 3 -50");activeSheet.getCell(9, 10).backColor("Accent 4 -50");activeSheet.getCell(9, 11).backColor("Accent 5 -50");activeSheet.getCell(9, 12).backColor("Accent 6 -50");

今天的内容你学会了吗果你对我们的文章感兴趣或者有任何疑问，欢迎咨询在线客服>>