Initialization

Theme:

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.

You can add a SpreadJS workbook to a web page using the following steps:

Add two link elements to the head section of the web page: one for the gc.spread.sheets.x.x.x.css stylesheet and the other for the gc.spread.sheets.all.x.x.x.min.js SpreadJS library.
Create a div element with an id attribute in the body of the page to host the SpreadJS component.

    <!DOCTYPE html>
    <html>
       <head>
          <link href='gc.spread.sheets.x.x.x.css' rel='stylesheet' type='text/css'/>
          <script src='gc.spread.sheets.all.x.x.x.min.js' type='text/javascript'></script>
          <script type='text/javascript' charset='utf-8'>
          ...
          </script>
       </head>
       <body>
            <div id='ss' style='width:100%; height:400px;'></div>
       </body>
    </html>

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.

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.

Finally, you can also access any workbook on the page using the GC.Spread.Sheets.findControl method and provide it with a DOM element on the page that hosts a workbook.

    window.onload = function () {
       // Initialize a workbook
       var workbook = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
       // var workbook = new GC.Spread.Sheets.Workbook('ss', { sheetCount: 1 });
       // get workbook object
       // var workbook = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    };

If you use JQuery, instantiate the workbook as follows:

    $(document).ready(function () {
       // Initialize a workbook
       var workbook = new GC.Spread.Sheets.Workbook($('#ss')[0], { sheetCount: 1 });
       // get spread Workbook object
       // var workbook = $('#ss').data('workbook');
    });

Feedback

Submit and view feedback for

This Product This Page

You can add a SpreadJS workbook to a web page using the following steps: Add two link elements to the head section of the web page: one for the gc.spread.sheets.x.x.x.css stylesheet and the other for the gc.spread.sheets.all.x.x.x.min.js SpreadJS library. Create a div element with an id attribute in the body of the page to host the SpreadJS component. 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. 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. Finally, you can also access any workbook on the page using the GC.Spread.Sheets.findControl method and provide it with a DOM element on the page that hosts a workbook. If you use JQuery, instantiate the workbook as follows:

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 sheet = spread.getActiveSheet();
//Add text to first cell
sheet.setValue(0, 0, "Hello World!");
}

<!doctype html>
<html lang="en" 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">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="app.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>
</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;
}