Spreadsheet View

This demo show how you can manipulate the sheets in a workbook by dynamically adding and removing them with JavaScript code. Try using the buttons below to see this functionality in action.

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 worbkook 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.
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('btnAddSheet').addEventListener('click',function() { spread.addSheet(spread.getSheetCount()); }); _getElementById('btnRemoveSheet').addEventListener('click',function() { var activeIndex = spread.getActiveSheetIndex(); if (activeIndex >= 0) { spread.removeSheet(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); } } }); }; function initSpread(spread) { var sd = dataSource; var sheet = spread.getActiveSheet(); if (sd.length > 0) { sheet.setDataSource(sd); } sheet.setColumnWidth(0, 160); sheet.setColumnWidth(1, 70); sheet.setColumnWidth(2, 90); sheet.setColumnWidth(3, 110); sheet.setColumnWidth(4, 80); sheet.setColumnWidth(6, 110); } 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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/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" 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> </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; }