増分計算

SpreadJSは増分計算をサポートします。これにより、長い計算処理の間、UIの応答をブロックしないようにできます。

増分計算では、SpreadJS は期間を分けてセルを計算し、期間ごとに UI イベントをチェックして応答します。 これにより、ワークブックに多数の数式が含まれている場合に UI が長時間フリーズすることがなくなります。 増分計算を使用するには、ワークブックの incrementalCalculation オプションを true に設定します。 また、ファイル読み込み時に、incrementalCalculation オプションを true に設定することもできます。 増分計算の場合、ユーザーは CalculationProgress イベントによって計算の進行状況を取得できます。
window.onload = function () { let spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); let statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(document.getElementById('statusBar')); statusBar.bind(spread); let incrementalCalculationElement = document.getElementById("enable-incremental-calculation"); incrementalCalculationElement.addEventListener("change", function () { spread.options.incrementalCalculation = incrementalCalculationElement.checked; }); document.getElementById('open').onclick = function () { let file = document.querySelector('#selectedFile').files[0]; if (!file) { return; } let options = { openMode: 2 /* incremental loading */, fullRecalc: true, dynamicReferences: false, incrementalCalculation: incrementalCalculationElement.checked }; if (isSJSFile(file)) { spread.open(file, function() {}, function() {}, options); } else { spread.import(file, function() {}, function() {}, options); } }; document.getElementById('calculate-all').onclick = function () { spread.calculate(); }; fetch(getFileUrl()).then(res => res.blob()).then(file => spread.open(file, null, null, { openMode: 2 /* incremental loading */, fullRecalc: true, incrementalCalculation: true })); }; function isSJSFile (file) { let fileName = file.name; let extensionName = fileName.substring(fileName.lastIndexOf(".") + 1); return extensionName === "sjs"; } function getFileUrl () { return '$DEMOROOT$/spread/source/data/incremental-calculation.sjs'; }
<!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" /> <meta name="spreadjs culture" content="ja-jp" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-io/dist/gc.spread.sheets.io.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-reportsheet-addon/dist/gc.spread.report.reportsheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.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="options-container"> <div class="option-row"> <div class="inputContainer"> <input id="selectedFile" type="file" name="files[]"accept=".sjs, .xlsx, .xlsm, .ssjson, .json, .csv" /> <button class="settingButton" id="open">開く</button> <div class="options"> <div class="item"><input id="enable-incremental-calculation" type="checkbox" checked><label for="enable-incremental-calculation">増分計算を有効にする</label></div> </div> <button class="settingButton" id="calculate-all">計算を実行する</button> </div> </div> </div> </div></body> </html>
body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .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; } .options-container { float: right; width: 280px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .sample-options { z-index: 1000; } .inputContainer { width: 100%; height: auto; border: 1px solid #eee; padding: 6px 12px; margin-bottom: 10px; box-sizing: border-box; } .settingButton { color: #fff; background: #82bc00; outline: 0; line-height: 1.5715; position: relative; display: inline-block; font-weight: 400; white-space: nowrap; text-align: center; height: 32px; padding: 4px 15px; font-size: 14px; border-radius: 2px; user-select: none; cursor: pointer; border: 1px solid #82bc00; box-sizing: border-box; margin-bottom: 10px; margin-top: 10px; } .settingButton:hover { color: #fff; border-color: #88b031; background: #88b031; } .options-title { font-weight: bold; margin: 4px 2px; } #selectedFile { width: 180px; } #saveFileType { width: 120px; height: 31px; } .options .item { margin: 5px 0px; display: flex; } .save-options .item { margin: 5px 0px; display: flex; } label { margin-left: 3px; } select, input[type="text"], input[type="number"] { display: inline-block; margin-left: auto; width: 120px; font-weight: 400; outline: 0; line-height: 1.5715; border-radius: 2px; border: 1px solid #F4F8EB; box-sizing: border-box; }