Cell Basic

SpreadJS allows complete spreadsheet customization down to the cell level, not just on rows and columns. Features include multiple cell types and dropdowns, cell styles and states, fonts, formatting, orientation, fill, merge, padding, borders, validation, conditional formatting, comments, and more. Explore all the features in this Cells section.

For example, you can get an instance of a cell by specifying its row index and column index. You also can get a series of cells in a range of the sheet area. If you want to get a cell's position, width, or height, use the getCellRect method. This method returns the rectangle of the cell. The spread provides a referenceStyle property. It sets the ReferenceStyle enumeration, which provides two settings: a1 r1c1 The property sets the style of cell formulas and its default value is ReferenceStyle.a1. The appearance is the same as Excel. Use the following code to change the setting: The sheet has an allowCellOverflow property; its default value is false. When this property's value has been set to true, the cell's data will overflow into adjacent empty cells. Use the following code to change the property's value:
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(); sheet.defaults.colWidth = 120; sheet.setColumnWidth(1, 200); sheet.setValue(0, 0, 12); sheet.setValue(1, 0, 13); sheet.setValue(2, 0, 14); sheet.setValue(3, 0, 15); sheet.setValue(5, 0, 'ReferenceStyle'); sheet.setValue(6, 0, 'A1'); sheet.setValue(5, 1, 'Formula:'); sheet.setFormula(6, 1, '=FORMULATEXT(C7)'); sheet.setValue(5, 2, 'Result:'); sheet.setFormula(6, 2, 'SUM(A4:A8)'); sheet.setValue(9, 0, 'textAlignment'); sheet.setValue(10, 0, 'right'); sheet.setValue(11, 0, 'center'); sheet.setValue(12, 0, 'left'); sheet.getCell(10, 2).value('The cell overflow to right cell').hAlign(3); sheet.getCell(11, 2).value('The cell overflow to left and right cell').hAlign(1); sheet.getCell(12, 2).value('The cell overflow to left cell').hAlign(2); sheet.resumePaint(); document.getElementById('referenceStyle').addEventListener('change', function() { var referenceStyleValue = this.value; var referenceStyle = spreadNS.ReferenceStyle[referenceStyleValue]; spread.options.referenceStyle = referenceStyle; spread.getActiveSheet().recalcAll(); sheet.getCell(6, 0).value(referenceStyleValue.toLocaleLowerCase() === 'a1' ? 'A1' : 'R1C1'); }); document.getElementById('chkAllowCellOverFlow').addEventListener('click', function() { var sheet = spread.getActiveSheet(); if (sheet) { sheet.options.allowCellOverflow = this.checked; } }); };
<!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"> <div class="position"> <P>The reference style is defined as 'A1' and 'R1C1', the rows and the columns on the worksheet are numbered.</P> <P>If you change the reference style, the formula's reference will change too.</P> <label for="referenceStyle">ReferenceStyle:</label> <select id="referenceStyle" style="margin: 0 20px 0 6px"> <option value="a1">A1</option> <option value="r1c1">R1C1</option> </select> </div> <div style="padding-top: 16px"> <input type="checkbox" id="chkAllowCellOverFlow" checked="checked"/> <label for="chkAllowCellOverFlow">AllowCellOverFlow</label> </div> </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 { 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; }