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;
}
