Initialization

The first step to work with SpreadJS is to add a workbook object to the web page and get an instance variable through which you can customize all aspects of the control and dynamically change the contents of the loaded workbook with JavaScript code.

<p>You can add a SpreadJS workbook to a web page using the following steps:</p> <ol> <li>Add two <strong>link</strong> elements to the head section of the web page: one for the <strong>gc.spread.sheets.x.x.x.css</strong> stylesheet and the other for the <strong>gc.spread.sheets.all.x.x.x.min.js</strong> SpreadJS library.</li> <li>Create a div element with an id attribute in the body of the page to host the SpreadJS component.</li> </ol> <pre><code class="hljs"> <span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'gc.spread.sheets.x.x.x.css'</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">'stylesheet'</span> <span class="hljs-attr">type</span>=<span class="hljs-string">'text/css'</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">'gc.spread.sheets.all.x.x.x.min.js'</span> <span class="hljs-attr">type</span>=<span class="hljs-string">'text/javascript'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">'text/javascript'</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">'utf-8'</span>&gt;</span> ... <span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">'ss'</span> <span class="hljs-attr">style</span>=<span class="hljs-string">'width:100%; height:400px;'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span> </code></pre> <ol start="3"> <li>In the onload event of the web page define a javascript variable and assign it a workbook object by calling the Workbook constructor and providing it with the DOM object of the div element you created in the previous step. The Workbook object also takes an optional JSON object that specifies different properties for the workbook that can be set during instantiation. Alternatively, you can specify these options after the workbook is created.</li> </ol> <p>Once the object is created, you can use the workbook variable to load a SpreadJS SSJSON file, import an Excel file, change the visible elements of the control like the scrollbars, tabstrip, formula box, and dynamically modify the workbook's sheets, tables, and charts, etc. The other feature demos will demonstrate many of these properties.</p> <p>Finally, you can also access any workbook on the page using the <strong>GC.Spread.Sheets.findControl</strong> method and provide it with a DOM element on the page that hosts a workbook.</p> <pre><code class="hljs js language-js"> <span class="hljs-built_in">window</span>.onload = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-comment">// Initialize a workbook</span> <span class="hljs-keyword">var</span> workbook = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Workbook(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'ss'</span>), { <span class="hljs-attr">sheetCount</span>: <span class="hljs-number">1</span> }); <span class="hljs-comment">// get workbook object</span> <span class="hljs-comment">// var workbook = GC.Spread.Sheets.findControl(document.getElementById('ss'));</span> }; </code></pre> <p>If you use JQuery, instantiate the workbook as follows:</p> <pre><code class="hljs js language-js"> $(<span class="hljs-built_in">document</span>).ready(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-comment">// Initialize a workbook</span> <span class="hljs-keyword">var</span> workbook = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Workbook($(<span class="hljs-string">'#ss'</span>)[<span class="hljs-number">0</span>], { <span class="hljs-attr">sheetCount</span>: <span class="hljs-number">1</span> }); <span class="hljs-comment">// get spread Workbook object</span> <span class="hljs-comment">// var workbook = $('#ss').data('workbook');</span> }); </code></pre>
window.onload = function() { // host the workbook control in a DIV element with id "ss" var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 }); /* * retrieve the spread workbook object from the host element using findControl static method. * var spread = GC.Spread.Sheets.findControl(document.getElementById('ss')); */ initSpread(spread); }; 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); }
<!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"> <!-- Workbook host element --> <div id="ss" style="width:100%;height:100%"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }