当使用 fromJSON 函数加载数据时，您可以使用增量加载在后台加载单元格的值和公式。
您可以将 incrementalLoading 设置为true或在选项中添加回调函数。
使用 incrementalLoading 中的回调函数，您可以获取加载状态或在加载完成时执行其它操作。
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 name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-excelio/dist/gc.spread.excelio.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/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="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.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;
}
