Visibility

SpreadJS allows you to show or hide the sheets. This is useful if you want to access the data in the hidden sheet, but not let the users see the data.

Use the sheet.visible() method and sheetTabVisible to change whether the sheet is visible or get the visible status of the sheet. The visible states: hidden: The sheet tab is hidden, effect is equal to false. visible: The sheet tab is visible, effect is equal to true, and it is the default value of sheetTabVisible. veryHidden: The sheet tab is very hidden. If you want to get a sheet visible status in the Spread component, you just need the following code: If you want to hide a sheet in the Spread component, you just need the following code: If you want to hide a sheet deeply (which means it cannot unhidden with the UI) in the Spread component, you just need the following code:
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); document.getElementById("btnVisible").addEventListener('click',function() { for (var i = 0; i < spread.sheets.length; i++) { if (spread.sheets[i].visible() === 0) { spread.sheets[i].visible(true); break; } } }); document.getElementById("btnInvisible").addEventListener('click',function() { var sheet = spread.getActiveSheet(); if (sheet) { var activeIndex = spread.getActiveSheetIndex(); if (activeIndex - 1 >= 0) { spread.setActiveSheetIndex(activeIndex - 1); } sheet.visible(false); } }); document.getElementById("btnShowVeryHidden").addEventListener('click',function() { for (var i = 0; i < spread.sheets.length; i++) { if (spread.sheets[i].visible() === 2) { spread.sheets[i].visible(true); break; } } }); document.getElementById("btnVeryHidden").addEventListener('click',function() { var sheet = spread.getActiveSheet(); if (sheet) { var activeIndex = spread.getActiveSheetIndex(); if (activeIndex - 1 >= 0) { spread.setActiveSheetIndex(activeIndex - 1); } sheet.visible(2); } }); }; function initSpread(spread) { var sheet = spread.getActiveSheet(); }
<!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"> <input type="button" id="btnVisible" value="Show Sheet" /> </div> <div class="option-row"> <input type="button" id="btnInvisible" value="Hide Sheet" /> </div> <div class="option-row"> <input type="button" id="btnVeryHidden" value="Very Hide Sheet" /> </div> <div class="option-row"> <input type="button" id="btnShowVeryHidden" value="Show Very Hide Sheet" /> </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: 6px; } input { padding: 4px 6px; } input[type=button] { margin-top: 6px; display: block; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }