Initialize Sheet

This sample shows how you can add a single sheet or multiple sheets in Spread.Sheets.

Use the following steps to reference Spread and work with the sheets. Similar to other libraries, Sheet requires the following included files: gc.spread.sheets.x.x.x.css gc.spread.sheets.all.x.x.x.min.js Create a sheet using the following code (the parameter is the sheet's name). Add it at the specified position of an existing Spread component. If you want to remove an existing sheet from the Spread component, use the following code. This example code removes the first sheet in the Spread. If you want to remove all the sheets in the Spread component, use the convenient clearSheets method. If you want to customize the sheet's name, use the name methods to get and set the sheet's name.
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss')); initSpread(spread); _getElementById('btnAddSheet').addEventListener('click', function() { spread.addSheet(spread.getSheetCount()); }); _getElementById('btnRemoveSheet').addEventListener('click', function() { if (spread.getSheetCount() > 0) { spread.removeSheet(0); } }); _getElementById('btnClearSheets').addEventListener('click', function() { spread.clearSheets(); }); }; 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"> <input type="button" value="Add Sheet" id="btnAddSheet"/> <input type="button" value="Remove Sheets" id="btnRemoveSheet"/> <input type="button" value="Remove All Sheets" id="btnClearSheets"/> </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; }