样式

SpreadJS 提供一个样式的类, 其中包含很多属性, 例如前景色, 背景色等等。

你可以构造一个样式并设置不同的属性, 示例代码如下: 然后你可以将此样式设置给单元格, 行, 列, 或者一片区域: 样式在不同的层级结构中具有不同的优先级别, 如下: 单元格 > 行 > 列。 SpreadJS 支持给样式设置一个名称, 并将这个命名过的样式加入到表单的名称样式集合中。这样让样式的使用和管理更方便。 你可以构造一个名称样式, 并将此样式添加到表单或者 Spread 控件的名称样式集合中。 当名称样式添加到表单名称样式集合中后, 可以通过样式的名称找到它或直接通过名称设置样式: 如果名称样式不再使用, 你可以将其从名称集合中删除掉:
var data = [ ["Month", "Payment", "Principal", "Interest", "Balance"], [1, 8750.00, 8333.34, 416.67, 91666.67], [2, 8715.28, 8333.34, 381.94, 83333.33], [3, 8680.56, 8333.34, 347.22, 75000.00], [4, 8645.83, 8333.34, 312.50, 66666.67], [5, 8611.11, 8333.34, 277.78, 58333.33], [6, 8576.39, 8333.34, 243.06, 50000.00], [7, 8541.67, 8333.34, 208.33, 41666.67], [8, 8506.94, 8333.34, 173.61, 33333.33], [9, 8472.22, 8333.34, 138.89, 25000.00], [10, 8437.50, 8333.34, 104.17, 16666.67], [11, 8402.78, 8333.34, 69.44, 8333.33], [12, 8368.06, 8333.34, 34.72, 0.00], ["Total", 102708.33, 100000.00, 2708.33] ] window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 }); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); var spreadNS = GC.Spread.Sheets; sheet.suspendPaint(); sheet.name("Basic Usage"); var cellStyle = new spreadNS.Style(); cellStyle.backColor = "#f7a711"; var rowStyle = new spreadNS.Style(); rowStyle.backColor = "#82bc00"; var columnStyle = new spreadNS.Style(); columnStyle.backColor = "#cccccc"; sheet.setText(4, 4, 'cell style', spreadNS.SheetArea.viewport); sheet.setStyle(4, 4, cellStyle, spreadNS.SheetArea.viewport); sheet.setStyle(4, -1, rowStyle, spreadNS.SheetArea.viewport); sheet.setStyle(9, -1, rowStyle, spreadNS.SheetArea.viewport); sheet.setStyle(-1, 4, columnStyle, spreadNS.SheetArea.viewport); sheet.setStyle(-1, 6, columnStyle, spreadNS.SheetArea.viewport); cellStyle.name = 'style1'; rowStyle.name = 'style2'; columnStyle.name = 'style3'; sheet.addNamedStyle(cellStyle); sheet.addNamedStyle(rowStyle); sheet.addNamedStyle(columnStyle); sheet.setText(1, 0, 'style1', spreadNS.SheetArea.viewport); sheet.setStyle(1, 0, sheet.getNamedStyle('style1'), spreadNS.SheetArea.viewport); sheet.setText(1, 1, 'style2', spreadNS.SheetArea.viewport); sheet.setStyle(1, 1, sheet.getNamedStyle('style2'), spreadNS.SheetArea.viewport); sheet.setText(1, 2, 'style3', spreadNS.SheetArea.viewport); sheet.setStyle(1, 2, sheet.getNamedStyle('style3'), spreadNS.SheetArea.viewport); var style5 = new spreadNS.Style(); style5.backColor = "red"; style5.isVerticalText = 'true'; style5.textIndent = 5; var style6 = new spreadNS.Style(); style6.backColor = "green"; style6.isVerticalText = 'true'; style6.wordWrap = 'true'; var style7 = new spreadNS.Style(); style7.backColor = "yellow"; style7.isVerticalText = 'true'; style7.shrinkToFit = 'true'; sheet.resumePaint(); sheet.bind(GC.Spread.Sheets.Events.SelectionChanged, onSelectionChanged.bind(sheet)); var sheet1 = spread.getSheet(1); sheet1.suspendPaint(); sheet1.name("Loan"); sheet1.setColumnCount(5); for (let i = 1; i < 5; i++) { sheet1.setColumnWidth(i, 100); } sheet1.setValue(0, 0, "Principal: $100,000.00"); sheet1.setValue(1, 0, "Interest rate: 5.00%"); sheet1.setValue(2, 0, "Payment interval: Monthly"); sheet1.setValue(3, 0, "Number of payments: 12"); sheet1.setArray(5, 0, data); var summaryStyle = new GC.Spread.Sheets.Style(); summaryStyle.backColor = "#D9EAD3"; sheet1.getRange(0, 0, 4, 3).setStyle(summaryStyle); var headStyle = new GC.Spread.Sheets.Style(); headStyle.font = "bold 12px sans-serif"; headStyle.backColor = "#cccccc"; var contentStyle = new GC.Spread.Sheets.Style(); contentStyle.backColor = "#81b100"; sheet1.getRange("A6:E6").setStyle(headStyle); sheet1.getRange(5, 0, 14, 5).hAlign(GC.Spread.Sheets.HorizontalAlign.center) for (let r = 6; r < 18; r++) { if (r % 2 == 0) { sheet1.setStyle(r,-1,contentStyle); } } var currencyStyle = new GC.Spread.Sheets.Style(); currencyStyle.formatter = "[$$-409]#,##0.00"; currencyStyle.name = "currency"; sheet1.addNamedStyle(currencyStyle); sheet1.getRange(6, 1, 13, 4).setStyleName("currency"); sheet1.getRange(18,0,1,5).font("bold 12px sans-serif") sheet1.resumePaint(); sheet1.bind(GC.Spread.Sheets.Events.SelectionChanged, onSelectionChanged.bind(sheet1)); } function onSelectionChanged(eventName, args) { var sheet = this; var newSelections = args.newSelections[0]; var style = sheet.getStyle(newSelections.row, newSelections.col); var actualStyle = sheet.getActualStyle(newSelections.row, newSelections.col); _getElementById("getStyleLabel").innerHTML = "sheet.getStyle(" + newSelections.row + ", " + newSelections.col + ")"; _getElementById("getActualStyleLabel").innerHTML = "sheet.getActualStyle(" + newSelections.row + ", " + newSelections.col + ")"; _getElementById("getStyle").style.backgroundColor = getStyleColor(style); _getElementById("getActualStyle").style.backgroundColor = getStyleColor(actualStyle); } function getStyleColor(style) { var color = ''; if (style && style.backColor) { color = style.backColor; } return color; } function _getElementById(id) { return document.getElementById(id); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="zh-cn" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <p style="padding:2px 10px;">Spread Styles are useful for consolidating visual properties that are use in a lot of different cells.</p> <p style="padding:2px 10px; background-color:#F4F8EB"> Select cell C2, E2, E5 or E10 then any other cell to see difference between the getStyle and getActualStyle api. </p> <label id= "getStyleLabel" for="getStyle">sheet.getStyle(0, 0)</label> <input id="getStyle" type="text" disabled="disabled"/> <label id="getActualStyleLabel" for="getActualStyle">sheet.getActualStyle(0, 0)</label> <input id="getActualStyle" type="text" disabled="disabled"/> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } label { display: block; margin-bottom: 6px; } input { padding: 4px 6px; } input[type=button] { margin-top: 6px; display: block; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }