Use the addRows, addColumns, deleteRows, deleteColumns, setRowCount and setColumnCount methods to change the number of rows or columns in each sheet area.
When calling the setRowCount and setColumnCount methods, you can choose which used range type to protect.
Each of the following lines could be used to change the row count of the sheet's viewport area.
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.
Use the setRowVisible and setColumnVisible methods to specify whether a row or column is displayed.
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:
SpreadJS also provides many methods to get useful information about a sheet's row or column, as illustrated in these lines of code.
SpreadJS provides the resizeZeroIndicator 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 ResizeZeroIndicator enumeration value.
default: single gridline (same as normal)
enhanced: double gridline (default)
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 = 1; rowIndex <= 9; rowIndex++) {
sheet.setText(rowIndex, 0, "Row");
sheet.setValue(rowIndex, 1, rowIndex);
}
for (var columnIndex = 1; columnIndex <= 5; columnIndex++) {
sheet.setText(0, columnIndex, "Column");
sheet.setValue(1, columnIndex, columnIndex);
}
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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/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="options-row">
<label style="display: inline-block;">The following buttons add/remove rows/columns at the end of the sheet.</label>
</div>
<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>
<hr />
<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>
<hr />
<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: #F4F8EB;
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] {
width: 110px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
