Cell Basic

In SpreadJS, each sheet area consists of multiple cells. You can return information about many aspects of the cells, including information about specific cells.

<p>For example, you can get an instance of a cell by specifying its row index and column index.</p> <pre><code class="hljs js language-js"> sheet.getCell(<span class="hljs-number">1</span>, <span class="hljs-number">1</span>, GC.Spread.Sheets.SheetArea.viewport); </code></pre> <p>You also can get a series of cells in a range of the sheet area.</p> <pre><code class="hljs js language-js"> sheet.getRange(<span class="hljs-number">1</span>, <span class="hljs-number">1</span>, <span class="hljs-number">10</span>, <span class="hljs-number">10</span>, GC.Spread.Sheets.SheetArea.viewport); </code></pre> <p>If you want to get a cell's position, width, or height, use the <strong>getCellRect</strong> method. This method returns the rectangle of the cell.</p> <pre><code class="hljs js language-js"> sheet.getCellRect(<span class="hljs-number">1</span>, <span class="hljs-number">1</span>, GC.Spread.Sheets.SheetArea.viewport); </code></pre> <p>The spread provides a <strong>referenceStyle</strong> property. It sets the ReferenceStyle enumeration, which provides two settings:</p> <ul> <li><strong>a1</strong></li> <li><strong>r1c1</strong></li> </ul> <p>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:</p> <pre><code class="hljs js language-js"> spread.options.referenceStyle = GC.Spread.Sheets.ReferenceStyle.r1c1; </code></pre> <p>The sheet has an <strong>allowCellOverflow</strong> 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:</p> <pre><code class="hljs js language-js"> sheet.options.allowCellOverflow = <span class="hljs-literal">true</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(); 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; }