增量加载

SpreadJS fromJSON函数支持增量加载,该加载将在后台加载值和公式时快速显示数据。当导入大文件时建议使用增量加载以帮助优化初始加载时间。

当使用 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) { progress = progress * 100; this.contentDiv.children[0].innerText = "Loading: " + progress.toFixed(2) + "%"; 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) { loadingStatus.updateProgress(progress); }, 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/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/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="$DEMOROOT$/zh/purejs/node_modules/@grapecity/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; }