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.
function LoadingStatus(name, options) {
GC.Spread.Sheets.StatusBar.StatusItem.call(this, name, options);
}
LoadingStatus.prototype = new GC.Spread.Sheets.StatusBar.StatusItem();
LoadingStatus.prototype.onCreateItemView = function (container) {
var statusBarDiv = this.contentDiv = document.createElement('div');
statusBarDiv.innerHTML = `<span>Ready</span>
<span style="width: 150px;height: 9px;border: solid 1px white;display: none;margin-left: 10px; line-height: 0px;">
<span style="width: 93px;height: 9px;background-color: white;display: inline-block;"></span>
</span>`;
statusBarDiv.style.padding = "0 3px";
container.appendChild(statusBarDiv);
};
LoadingStatus.prototype.updateProgress = function (progress, args) {
progress = progress * 100;
this.contentDiv.children[0].innerText = "Loading: " + progress.toFixed(2) + "%, "+ args.sheet.name();
this.contentDiv.children[1].style.display = "inline-block";
this.contentDiv.children[1].children[0].style.width = progress * 1.5 + "px";
};
LoadingStatus.prototype.updateText = function (text) {
this.contentDiv.children[0].innerText = text;
this.contentDiv.children[1].style.display = "none";
};
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);
statusBar.remove("cellMode");
var loadingStatus = new LoadingStatus('LoadingStatus', { tipText: 'LoadingStatus' });
statusBar.add(loadingStatus);
var incrementalEle = document.getElementById("incremental");
function fromJSON(json) {
if (incrementalEle.checked) {
spread.fromJSON(json, {
doNotRecalculateAfterLoad: true,
incrementalLoading: {
loading: function (progress, args) {
loadingStatus.updateProgress(progress, args);
},
loaded: function () {
loadingStatus.updateText("Ready");
}
}
});
} else {
spread.fromJSON(json);
loadingStatus.updateText("Ready");
}
}
document.getElementById('loadSample').onclick = function () {
fromJSON(ssjson);
}
document.getElementById('loadFile').onclick = function () {
var file = document.getElementById("fileDemo").files[0];
if (file) {
loadingStatus.updateText("Reading file");
var fileName = file.name;
var suffix = fileName.substr(fileName.lastIndexOf('.'));
if (suffix === '.xlsx') {
var excelIo = new GC.Spread.Excel.IO();
// here is excel IO API
excelIo.open(file, function (json) {
fromJSON(json);
}, function (e) {
console.log(e);
});
} else if (suffix === '.ssjson' || suffix === '.json') {
var reader = new FileReader();
reader.onload = function () {
var json = JSON.parse(this.result);
fromJSON(json);
};
reader.readAsText(file);
}
}
};
};
<!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$/en/purejs/node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets-shapes/dist/gc.spread.sheets.shapes.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 or import a file 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 class="option-row">
<div class="inputContainer">
<input type="file" id="fileDemo" class="input">
<input type="button" id="loadFile" value="Load File" 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;
}
