With incremental calculation, SpreadJS will calculate the cells with the period, and check and respond to the UI events every period.
This prevents the UI from freezing for a long time when the workbook contains many formulas.
In order to use the incremental calculation feature, you need to set the workbook option incrementalCalculation to true or load the file with incrementalCalculation. For example:
When incremental calculation, user can get the calculation progress by the CalculationProgress event.
For example:
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" />
<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-print/dist/gc.spread.sheets.print.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-io/dist/gc.spread.sheets.io.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$/en/purejs/node_modules/@mescius/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-reportsheet-addon/dist/gc.spread.report.reportsheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.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">Open</button>
<div class="options">
<div class="item"><input id="enable-incremental-calculation" type="checkbox" checked><label for="enable-incremental-calculation">Enable incremental calculation</label></div>
</div>
<button class="settingButton" id="calculate-all">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;
}
