You can get or set the selected state of a worksheet using the isSelected method, for example:
The active sheet is always selected and cannot be set to unselected.
If you set active sheet as unselected using the isSelected method, the active but not selected sheet will have another sheet tab view.
You can also change the selected state for a sheet or sheets by clicking with shift/ctrl key (in MacOS you need to use shift/command key instead).
Spread also provides two events when changing the selected state of a sheet.
Spread supports batch delete and hide functions of multiple selected sheets.
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 5 });
initCheckBoxesEvent(spread);
initSpread(spread);
};
function initCheckBoxesEvent(spread) {
var sheetsNames = ["Sheet1", "Sheet2", "Sheet3", "Sheet4", "Sheet5"];
sheetsNames.forEach(function (name) {
document.getElementById(name).addEventListener('change', function (e) {
var sheet = spread.getSheetFromName(name);
if (sheet) {
sheet.isSelected(this.checked);
spread.repaint();
}
});
});
}
function initSpread(spread) {
var sheet1 = spread.getSheetFromName("Sheet1");
var sheet2 = spread.getSheetFromName("Sheet2");
var sheet3 = spread.getSheetFromName("Sheet3");
sheet1.isSelected(true);
sheet2.isSelected(true);
sheet3.isSelected(true);
spread.bind(GC.Spread.Sheets.Events.SheetChanged, function (e, args) {
var checkboxElement = document.getElementById(args.sheetName);
if (checkboxElement) {
checkboxElement.checked = !checkboxElement.checked;
}
});
spread.repaint();
}
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="option-row">
<p>Click the checkbox to select or deselect the sheet.</p>
<p>Hold down the Shift/Ctrl/Cmd key and click the sheet tab to select/deselect multiple sheets. The sheet checkbox will update correspondingly.</p>
</div>
<div class="sheets-checkboxes-container">
<div class="option-row">
<input type="checkbox" id="Sheet1" checked/>
<label for="Sheet1" id="labelOfSheet1">Sheet1</label>
</div>
<div class="option-row">
<input type="checkbox" id="Sheet2" checked/>
<label for="Sheet2" id="labelOfSheet2">Sheet2</label>
</div>
<div class="option-row">
<input type="checkbox" id="Sheet3" checked/>
<label for="Sheet3" id="labelOfSheet3">Sheet3</label>
</div>
<div class="option-row">
<input type="checkbox" id="Sheet4" />
<label for="Sheet4" id="labelOfSheet4">Sheet4</label>
</div>
<div class="option-row">
<input type="checkbox" id="Sheet5" />
<label for="Sheet5" id="labelOfSheet5">Sheet5</label>
</div>
</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;
}
.sheets-checkboxes-container {
padding-left: 10px;
}
label {
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
hr {
border-color: #fff;
opacity: .2;
margin-top: 20px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
