Styles

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

<p>You can create a style and set properties for it using code such as the following:</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> style = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Style(); style.backColor = <span class="hljs-string">'red'</span>; style.foreColor = <span class="hljs-string">'green'</span>; style.isVerticalText = <span class="hljs-string">'true'</span>; </code></pre> <p>Then you can set the style to a cell, row, or column:</p> <pre><code class="hljs js language-js"> <span class="hljs-comment">//set style to cell.</span> sheet.setStyle(<span class="hljs-number">5</span>, <span class="hljs-number">5</span>, style, GC.Spread.Sheets.SheetArea.viewport); <span class="hljs-comment">//set style to row.</span> sheet.setStyle(<span class="hljs-number">5</span>, <span class="hljs-number">-1</span>, style, GC.Spread.Sheets.SheetArea.viewport); <span class="hljs-comment">//set style to column.</span> sheet.setStyle(<span class="hljs-number">-1</span>, <span class="hljs-number">5</span>, style, GC.Spread.Sheets.SheetArea.viewport); </code></pre> <p>The style in each of the different levels has a different precedence, as follows: cell &gt; row &gt; column.</p> <p>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.</p> <p>You can set a name for a style and add this style to the named style collection of the sheet or the Spread component.</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> style = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Style(); style.name = <span class="hljs-string">'style1'</span>; style.backColor = <span class="hljs-string">'red'</span>; <span class="hljs-comment">//add to sheet's named style collection.</span> sheet.addNamedStyle(style); <span class="hljs-comment">//add to spread's named style collection.</span> spread.addNamedStyle(style); </code></pre> <p>After the named style has been added to the named styles collection, you can get the style by its name:</p> <pre><code class="hljs js language-js"> sheet.getNamedStyle(<span class="hljs-string">'style1'</span>); spread.getNamedStyle(<span class="hljs-string">'style1'</span>); </code></pre> <p>If a named style will not be used, you can remove it from the named styles collection:</p> <pre><code class="hljs js language-js"> sheet.removeNamedStyle(<span class="hljs-string">'style1'</span>); spread.removeNamedStyle(<span class="hljs-string">'style1'</span>); </code></pre>
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; }