Styles

SpreadJS provides a Style class that includes many properties, such as foreColor, backColor, vertical text, and so on.

You can create a style and set properties for it using code such as the following: Then you can set the style to a cell, row, or column: The style in each of the different levels has a different precedence, as follows: cell > row > column. SpreadJS allows you to set a name for a style, and add this named style to the sheet's named styles collection. This makes the style more convenient to use and manage. You can set a name for a style and add this style to the named style collection of the sheet or the Spread component. After the named style has been added to the named styles collection, you can get the style by its name: If a named style will not be used, you can remove it from the named styles collection:
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); var spreadNS = GC.Spread.Sheets; var sheet = spread.getSheet(0); sheet.suspendPaint(); var cellStyle = new spreadNS.Style(); cellStyle.backColor = "red"; var rowStyle = new spreadNS.Style(); rowStyle.backColor = "green"; var columnStyle = new spreadNS.Style(); columnStyle.backColor = "yellow"; 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, function (eventName, args) { 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 charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.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;">SpreadJS provides a Style class that includes many properties, such as foreColor, backColor, and so on. Styles can be created and then assigned to a cell or a cell range. 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:lavender"> 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; }