行与列

在 SpreadJS 中, 每个表单区域中都可以包含多个行和列。SpreadJS 提供多个接口让你轻松定制行与列。

<p>调用 <strong>setRowCount</strong> 和 <strong>setColumnCount</strong> 方法来改变表单区域的行数和列数。 此外, 你可以调用 <strong>addRows</strong>, <strong>addColumns</strong>, <strong>deleteRows</strong>, 和 <strong>deleteColumns</strong> 方法来改变视图区域的行列数。</p> <p>以下代码可以用来改变表单视图区域的行与列。</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>如果行或者列的 resizeable 属性为 false , 那么将不能通过 UI 行为改变行列大小, 但是你仍可以通过执行代码来直接改变他们的高宽。</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>调用 <strong>setRowVisible</strong> 和 <strong>setColumnVisible</strong> 方法来指定行列是否可见。</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>在表单的视图区域, 当行或者列是自动匹配高宽, 它的内容将决定他的高度或者宽度。通过以下代码来设置一行或一列自动匹配高宽:</p> <pre><code class="hljs js language-js">sheet.autoFitColumn; sheet.autoFitRow </code></pre> <p>SpreadJS 也提供了很多接口来获取表单行和列的详细信息, 例如以下代码:</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 提供 <strong>resizeZeroIndicator</strong> 方法来控制当行高或列宽为0时,是否在行头或列头上显示双线提示线。参数为 <strong>ResizeZeroIndicator</strong> 枚举值。</p> <ul> <li><strong>default: 单线 (与正常显示相同)</strong></li> <li><strong>enhanced: 双线提示线 (默认值)</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 name="spreadjs culture" content="zh-cn" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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; }