Incremental Loading

Theme:

The SpreadJS fromJSON function supports incremental loading which will quickly display the data while loading the values and formulas in the background. This is recommended when importing large files to help optimize the initial load time.

When using the fromJSON function to load data, you can use incremental loading to load the cell values and formulas in the background.

You can set the incrementalLoading to true or add the callback function in the options.

    var jsonOptions = {
       incrementalLoading: true, // use the incremental loading when converting json to workbook, default value is false
    }
    var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    spread.fromJSON(JSON.parse(jsonStr), jsonOptions);

With the callback function in the incrementalLoading, you can get the loading status or set the works when the loading finished.

    var jsonOptions = {
       incrementalLoading: {
           loading: function (progress, args) {
               // The loading progress from 0 to 1.
               // args.sheet the sheet currently loading  
           },
           loaded: function () {
               // The works to do when loading finish.
           }
       },
    }
    var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    spread.fromJSON(JSON.parse(jsonStr), jsonOptions);

Feedback

Submit and view feedback for

This Product This Page

When using the fromJSON function to load data, you can use incremental loading to load the cell values and formulas in the background. You can set the incrementalLoading to true or add the callback function in the options. With the callback function in the incrementalLoading, you can get the loading status or set the works when the loading finished.

window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'));
var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(document.getElementById('statusBar'));
statusBar.bind(spread);
var incrementalEle = document.getElementById("incremental");
function fromJSON(json) {
if (incrementalEle.checked) {
spread.fromJSON(json, {
doNotRecalculateAfterLoad: true,
incrementalLoading: true
});
} else {
spread.fromJSON(json);
}
}
document.getElementById('loadSample').onclick = function () {
fromJSON(ssjson);
}
};

<!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$/en/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/incremental_load.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 class="sample-container">
<div id="ss" class="sample-spreadsheets"></div>
<div id="statusBar"></div>
</div>
<div class="sample-options">
<div class="options-container">
<p class="summary">
You can load the sample json to see the difference.
</p>
<div class="option-row">
<input type="checkbox" id="incremental" checked/>
<label for="incremental">Incremental Loading</label>
</div>
<div class="option-row">
<div class="inputContainer">
<input type="button" id="loadSample" value="Load Sample JSON" class="button">
</div>
</div>
</div>
</div>
</div>
</body>
</html>

* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@media only screen and (max-width: 768px) {
.options-toggle {
display: block !important;
top: 20px;
left: -30px;
width: 30px;
height: 30px;
position: absolute;
background-color: #86bd00;
line-height: 30px;
text-align: center;
padding: 4px;
box-sizing: border-box;
color: #fff;
}
.options-container {
width: 280px !important;
overflow: auto;
height: 100%;
padding: 22px;
box-sizing: border-box;
}
.sample-container {
width: 100% !important;
height: 100%;
overflow: hidden;
float: left;
}
.sample-options {
right: 0;
padding: 0 !important;
overflow: visible !important;
position: absolute;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, .25);
transition: right .25s ease-in-out;
z-index: 1000;
}
.sample-options.hidden {
right: -280px;
}
#statusBar {
bottom: 0;
height: 25px;
width: 100%;
position: relative;
float: left;
}
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-container {
width: calc(100% - 280px);
height: 100%;
float: left;
}
.sample-spreadsheets {
width: 100%;
height: calc(100% - 25px);
overflow: hidden;
}
#statusBar {
bottom: 0;
height: 25px;
width: 100%;
position: relative;
}
#incremental {
padding: 4px 6px;
width: auto;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
}
.option-row {
font-size: 14px;
padding: 16px 8px;
margin-top: 10px;
}
input {
width: 100%;
}
input[type=button] {
margin-top: 6px;
display: block;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}