To work with the worksheets of the SpreadJS workbook you need a reference to one of the worksheets. You can access any worksheet by its index, which is its position in the workbook, using the getSheet method of the Workbook object or using its name, which is the sheet's tab name, using the getSheetFromName workbook method. For example:
Use the Workbook getActiveSheet method to get an instance of the currently active worksheet.
To change the active worksheet use the setActiveSheetIndex method and provide the index of the desired sheet. For example:
Once you have a reference to a worksheet, you can use it to customize it as illustrated by the demos in the Worksheet section.
Other useful methods to work with the workbook sheets:
addSheet: add a named sheet at a specific position in the workbook.
getSheetCount: get the number of sheets in the workbook and use it to append a sheet to the workbook.
removeSheet and clearSheets: remove a sheet by index or clear all the workbook sheets.
getActiveSheetIndex: get the index of the ActiveSheet.
changeSheetIndex: change activeSheet to another index.
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'));
var spreadNS = GC.Spread.Sheets;
spread.setSheetCount(3);
initSpread(spread);
spread.bind(spreadNS.Events.ActiveSheetChanged, function(e, args) {
_getElementById('activeSheetIndex').value = spread.getActiveSheetIndex();
_getElementById('changeSheetIndexName').value = spread.getActiveSheet().name();
});
_getElementById('btnAddSheet').addEventListener('click',function() {
var activeIndex = spread.getActiveSheetIndex();
if (activeIndex >= 0) {
spread.addSheet(activeIndex+1);
spread.setActiveSheetIndex(activeIndex+1);
}
else{
spread.addSheet(0);
spread.setActiveSheetIndex(0);
}
});
_getElementById('btnRemoveSheet').addEventListener('click',function() {
var activeIndex = spread.getActiveSheetIndex();
if (activeIndex >= 0) {
spread.removeSheet(activeIndex);
spread.setActiveSheetIndex(activeIndex);
}
});
_getElementById('btnClearSheets').addEventListener('click',function() {
spread.clearSheets();
});
_getElementById('btnSetActiveSheetIndex').addEventListener('click',function() {
var index = _getElementById('activeSheetIndex').value;
if (!isNaN(index)) {
index = parseInt(index);
if (0 <= index && index < spread.getSheetCount()) {
spread.setActiveSheetIndex(index);
}
}
});
_getElementById('btnChangeSheetIndex').addEventListener('click',function() {
var sheetName = _getElementById('changeSheetIndexName').value;
var targetIndex = _getElementById('changeSheetIndexTargetIndex').value;
if (!isNaN(targetIndex)) {
targetIndex = parseInt(targetIndex);
if (0 <= targetIndex && targetIndex <= spread.getSheetCount()) {
spread.changeSheetIndex(sheetName, targetIndex);
}
}
});
};
function initSpread(spread) {
}
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/data/data.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">
<label>Use the below buttons to add, remove or clear all sheets from the current workbook.</label>
</div>
<div class="option-row">
<input type="button" value="Add Sheet" id="btnAddSheet"/>
<input type="button" value="Remove Sheet" id="btnRemoveSheet"/>
<input type="button" value="Clear Sheets" id="btnClearSheets"/>
</div>
<div class="option-row">
<label>ActiveSheetIndex:</label>
<input type="text" id="activeSheetIndex" value="0"/>
<input type="button" id="btnSetActiveSheetIndex" value="Set"/>
</div>
<div class="option-row">
<label>This switches the currently active sheet to the sheet at the specified index.</label>
</div>
<div class="option-row">
<label>ChangeSheetIndex</label>
<label>Sheet Name:</label>
<input type="text" id="changeSheetIndexName" value="Sheet1"/>
<label>Target Index:</label>
<input type="text" id="changeSheetIndexTargetIndex" value="2"/>
<input type="button" id="btnChangeSheetIndex" value="Set"/>
</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 {
display: block;
margin-bottom: 3px;
margin-top: 3px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
display: block;
width: 100%;
text-align: center;
}
input[type=text] {
width: 230px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
