Rows and Columns

In SpreadJS, each sheet area has several rows and columns. SpreadJS provides methods for you to customize the rows and columns.

<p>Use the <strong>setRowCount</strong> and <strong>setColumnCount</strong> methods to change the number of rows or columns in each sheet area. In addition, you can use the <strong>addRows</strong>, <strong>addColumns</strong>, <strong>deleteRows</strong>, and <strong>deleteColumns</strong> methods to change the number of rows or columns in the viewport.</p> <p>Each of the following lines could be used to change the row count of the sheet's viewport area.</p> <pre><code class="hljs js language-js"> sheet.setRowCount(<span class="hljs-number">20</span>, GC.Spread.Sheets.SheetArea.viewport); sheet.addRows(<span class="hljs-number">5</span>, <span class="hljs-number">10</span>); sheet.deleteRows(<span class="hljs-number">20</span>, <span class="hljs-number">10</span>); </code></pre> <p>If a row or column's resizeable property is false, it cannot be resized by user operations, but you can change its height or width directly by using code.</p> <pre><code class="hljs js language-js"> sheet.setRowResizable(<span class="hljs-number">1</span>, <span class="hljs-literal">false</span>); sheet.setColumnResizable(<span class="hljs-number">1</span>, <span class="hljs-literal">true</span>); sheet.setRowHeight(<span class="hljs-number">1</span>, <span class="hljs-number">20</span>); sheet.setColumnWidth(<span class="hljs-number">1</span>, <span class="hljs-number">40</span>); </code></pre> <p>Use the <strong>setRowVisible</strong> and <strong>setColumnVisible</strong> methods to specify whether a row or column is displayed.</p> <pre><code class="hljs js language-js"> sheet.setRowVisible(<span class="hljs-number">1</span>, <span class="hljs-literal">false</span>); sheet.setColumnVisible(<span class="hljs-number">1</span>, <span class="hljs-literal">true</span>); </code></pre> <p>In the sheet's viewport area, when a row or column is automatically sized, its height or width will be determined by the content's length. Use the following code to set a row or column to auto fit:</p> <pre><code class="hljs js language-js"> sheet.autoFitColumn(<span class="hljs-number">1</span>); sheet.autoFitRow(<span class="hljs-number">1</span>); </code></pre> <p>SpreadJS also provides many methods to get useful information about a sheet's row or column, as illustrated in these lines of code.</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> rowCount = sheet.getRowCount(); <span class="hljs-keyword">var</span> columnCount = sheet.getColumnCount(); <span class="hljs-keyword">var</span> cell = sheet.getCell(<span class="hljs-number">7</span>, <span class="hljs-number">7</span>); <span class="hljs-keyword">var</span> cells = sheet.getCells(<span class="hljs-number">2</span>, <span class="hljs-number">2</span>, <span class="hljs-number">7</span>, <span class="hljs-number">7</span>); <span class="hljs-keyword">var</span> rowHeight = sheet.getRowHeight(<span class="hljs-number">7</span>); <span class="hljs-keyword">var</span> columnWidth = sheet.getColumnWidth(<span class="hljs-number">7</span>); ... </code></pre> <p>SpreadJS provides the <strong>resizeZeroIndicator</strong> method to control whether to display double or single gridlines in the row or column header when the row height or column width is 0. The parameter is a <strong>ResizeZeroIndicator</strong> enumeration value.</p> <ul> <li><strong>default: single gridline (same as normal)</strong></li> <li><strong>enhanced: double gridline (default)</strong></li> </ul> <pre><code class="hljs js language-js"> sheet.setRowHeight(<span class="hljs-number">4</span>, <span class="hljs-number">0</span>); sheet.setColumnWidth(<span class="hljs-number">2</span>, <span class="hljs-number">0</span>); spread.resizeZeroIndicator(GC.Spread.Sheets.ResizeZeroIndicator.enhanced); <span class="hljs-comment">// spread.resizeZeroIndicator(GC.Spread.Sheets.ResizeZeroIndicator.default);</span> </code></pre>
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(_getElementById("ss")); var spreadNS = GC.Spread.Sheets, sheet = spread.getSheet(0), SheetArea = spreadNS.SheetArea; sheet.suspendPaint(); sheet.setRowCount(2, SheetArea.colHeader); sheet.setRowCount(10, SheetArea.viewport); sheet.setColumnCount(2, SheetArea.rowHeader); sheet.setColumnCount(6, SheetArea.viewport); sheet.setRowHeight(4, 0); sheet.setColumnWidth(2, 0); spread.options.resizeZeroIndicator = spreadNS.ResizeZeroIndicator.enhanced; for (var rowIndex = 0; rowIndex <= 9; rowIndex++) { sheet.setText(rowIndex, 0, "Value"); sheet.setFormula(rowIndex, 1, "RandBetween(45,85)"); } sheet.resumePaint(); _getElementById("resizeZeroIndicator").value=spread.options.resizeZeroIndicator; _getElementById("resizeZeroIndicator").addEventListener('change',function () { spread.options.resizeZeroIndicator = + this.value; }); /* * Add a row in viewport area. */ _getElementById("btnAddRow").addEventListener('click', function () { var sheet = spread.getActiveSheet(); if (sheet) { sheet.addRows(sheet.getRowCount(SheetArea.viewport), 1); } }); /* * Delete a row in viewport area. */ _getElementById("btnAddColumn").addEventListener('click', function () { var sheet = spread.getActiveSheet(); if (sheet) { sheet.addColumns(sheet.getColumnCount(SheetArea.viewport), 1); } }); /* * Add a column in viewport area. */ _getElementById("btnDeleteRow").addEventListener('click', function () { var sheet = spread.getActiveSheet(); if (sheet) { sheet.deleteRows(sheet.getRowCount(SheetArea.viewport) - 1, 1); } }); /* * Delete a column in viewport area. */ _getElementById("btnDeleteColumn").addEventListener('click', function () { var sheet = spread.getActiveSheet(); if (sheet) { sheet.deleteColumns(sheet.getColumnCount(SheetArea.viewport) - 1, 1); } }); /* * Show or hide the specified row. */ _getElementById("chkRowVisible").addEventListener('click', function () { var sheet = spread.getActiveSheet(); var rowIndex = parseInt(_getElementById("rowIndex").value); if (!isNaN(rowIndex)) { sheet.setRowVisible(rowIndex, this.checked); } }); /* * Auto fit or not fit the specified row. */ _getElementById("chkRowAutoFit").addEventListener('click', function () { var sheet = spread.getActiveSheet(); var rowIndex = parseInt(_getElementById("rowIndex").value); if (!isNaN(rowIndex)) { var checked = this.checked; if (checked) { sheet.autoFitRow(rowIndex); } } }); /* * Show or hide the specified column. */ _getElementById("chkColumnVisible").addEventListener('click', function () { var sheet = spread.getActiveSheet(); var columnIndex = parseInt(_getElementById("columnIndex").value); if (!isNaN(columnIndex)) { sheet.setColumnVisible(columnIndex, this.checked); } }); /* * Auto fit or not fit the specified column. */ _getElementById("chkColumnAutoFit").addEventListener('click', function () { var sheet = spread.getActiveSheet(); var columnIndex = parseInt(_getElementById("columnIndex").value); if (!isNaN(columnIndex)) { var checked = this.checked; if (checked) { sheet.autoFitColumn(columnIndex); } } }); }; 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"> <div class="option-row"> <input type="button" value="Add Row" id="btnAddRow" /> <input type="button" value="Delete Row" id="btnDeleteRow" /> </div> <div class="option-row"> <input type="button" value="Add Column" id="btnAddColumn" /> <input type="button" value="Delete Column" id="btnDeleteColumn" /> </div> <div class="option-row"> <label for="rowIndex" style="display: inline-block;width: 100px">Row Index:</label> <input type="text" id="rowIndex"/> <br> <label for="rowIndex" style="padding-top: 6px">The index is zero based.</label> <div class="option-row"> <input type="checkbox" id="chkRowVisible" checked /> <label for="chkRowVisible">Row Visible</label> </div> <div class="option-row"> <input type="checkbox" id="chkRowAutoFit" /> <label for="chkRowAutoFit">Row AutoFit</label> </div> </div> <div class="option-row"> <label for="columnIndex" style="display: inline-block;width: 100px">Column Index:</label> <input type="text" id="columnIndex" /> <br> <label for="columnIndex" style="padding-top: 6px">The index is zero based.</label> <div class="option-row"> <input type="checkbox" id="chkColumnVisible" checked /> <label for="chkColumnVisible">Column Visible</label> </div> <div class="option-row"> <input type="checkbox" id="chkColumnAutoFit" /> <label for="chkColumnAutoFit">Column AutoFit</label> </div> </div> <hr /> <div class="option-row"> <span>ResizeZeroIndicator:</span> <select id="resizeZeroIndicator"> <option value="0">Default</option> <option value="1">Enhanced</option> </select> </div> </div> </div> </body> </html>
input[type="text"] { width: 200px; } .colorLabel { background-color: lavender; width: 170px; } .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 { display: inline-block; } input[type=button] { margin-top: 6px; width: 110px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }