行与列

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

调用 setRowCount 和 setColumnCount 方法来改变表单区域的行数和列数。 此外, 你可以调用 addRows, addColumns, deleteRows, 和 deleteColumns 方法来改变视图区域的行列数。 以下代码可以用来改变表单视图区域的行与列。 如果行或者列的 resizeable 属性为 false , 那么将不能通过 UI 行为改变行列大小, 但是你仍可以通过执行代码来直接改变他们的高宽。 调用 setRowVisible 和 setColumnVisible 方法来指定行列是否可见。 在表单的视图区域, 当行或者列是自动匹配高宽, 它的内容将决定他的高度或者宽度。通过以下代码来设置一行或一列自动匹配高宽: SpreadJS 也提供了很多接口来获取表单行和列的详细信息, 例如以下代码: SpreadJS 提供 resizeZeroIndicator 方法来控制当行高或列宽为0时,是否在行头或列头上显示双线提示线。参数为 ResizeZeroIndicator 枚举值。 default: 单线 (与正常显示相同) enhanced: 双线提示线 (默认值)
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; }