계산 서비스 일시 중단
사용자는 일괄 처리로 API를 호출할 때 더 나은 환경을 위해 계산 서비스를 일시 중단할 수 있습니다. 예를 들어 다음과 같습니다.
계산 옵션
SpreadJS는 수동 또는 자동으로 설정할 수 있는 CalculationMode를 지원합니다.
자동 계산(기본값) 셀에 무언가를 입력했거나 복사 및 붙여넣기했을 때처럼 관련 데이터가 변경될 때마다 모든 더티 셀을 계산합니다.
수동 계산 수식이 입력되었거나 업데이트되었을 때만 수식을 계산하고, 종속성을 더티 상태로 유지합니다. 자르기/복사하여 붙여넣기 시 이 모드는 수식과 셀 값을 설정하지만 수식을 다시 계산하지는 않습니다.
계산 API
계산 API를 호출하여 강제로 계산할 수 있습니다.
Calculate 함수는 다시 빌드, 더티로 표시, 더티 브로드캐스트를 수행하고 더티 셀을 계산합니다.
먼저 계산 유형을 사용하여 다시 빌드하고 수식 참조에 셀을 더티로 표시합니다. `GC.Spread.Sheets.CalculationType`의 목록은 다음과 같습니다.
all - 계산을 위해 범위의 셀을 더티로 표시하는 기본 계산 유형입니다.
rebuild - 범위의 모든 수식 모델을 다시 빌드한 다음 계산을 위해 더티로 표시합니다.
minimal - 현재 셀 계산을 더티 상태로 둡니다.
regular - 계산을 위해 휘발성 및 순환 참조 셀을 더티로 표시합니다.
더티 셀 브로드캐스팅은 더티 셀의 종속 항목을 통합 문서에서 더티로 재귀적으로 설정합니다.
마지막 단계는 계산입니다. 자동 모드에서는 모든 더티 셀이 계산됩니다. 수동 모드에서는 수식 참조의 셀만 계산되고 다른 셀은 더티 상태로 유지됩니다.
예를 들어 다음과 같습니다.
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(_getElementById("ss"));
initSpread(spread);
};
function initSpread(spread) {
var sheet = spread.getActiveSheet();
spread.setSheetCount(2);
var sheet2 = spread.sheets[1];
spread.suspendPaint();
spread.suspendCalcService();
spread.options.iterativeCalculationMaximumIterations = 1;
spread.options.iterativeCalculationMaximumChange = 10;
sheet.setValue(0,0,"Tick:");
sheet.setFormula(0,1,"=REFRESH(B1+1,2,80)");
sheet.setValue(2,0,"Value:");
sheet.setFormula(2,1,"=IFERROR(CHOOSE(MOD(B1,16),5,-5,20,-2),0)+RAND()");
sheet.setValue(0,4,"Values:");
sheet.getRange(1,4,60,1).formula("=IF(MOD($B$1,60)=(ROW()-2),$B$3,E2)", true);
sheet2.setValue(0,6,"Values:");
sheet2.getRange(1,6,60,1).formula("=OFFSET(Sheet1!$E$2,MOD(Sheet1!$B$1-1+ROW(),60),0)", true);
sheet.setValue(1,6,'Value Sparkline:');
sheet.addSpan(2,6,6,6);
sheet.setFormula(2,6,'=LINESPARKLINE(E2:E61,0,,,)');
sheet.setValue(10,6,'Sheet2 reorder values:');
sheet.addSpan(11,6,6,6);
sheet.setFormula(11,6,'=LINESPARKLINE(Sheet2!G2:G61,0,,,)');
spread.resumeCalcService();
spread.resumePaint();
bindEvent(spread);
}
function bindEvent (spread) {
_getElementById("enableCalcService").addEventListener('change', function () {
if (this.checked) {
spread.resumeCalcService();
} else {
spread.suspendCalcService();
}
});
_getElementById("calculationMode").addEventListener('change', function () {
console.log(JSON.stringify(this.value));
if (this.value === "0") {
spread.options.calculationMode = GC.Spread.Sheets.CalculationMode.auto;
spread.calculate(false);
} else {
spread.options.calculationMode = GC.Spread.Sheets.CalculationMode.manual;
}
});
_getElementById("calculateSpread").addEventListener('click', function () {
let type = _getElementById("calculationType").value;
spread.calculate(GC.Spread.Sheets.CalculationType[type]);
});
_getElementById("calculateSheet").addEventListener('click', function () {
let type = _getElementById("calculationType").value;
spread.calculate(GC.Spread.Sheets.CalculationType[type], spread.getActiveSheet().name());
});
_getElementById("calculateRange").addEventListener('click', function () {
let type = _getElementById("calculationType").value;
let sheet = spread.getActiveSheet();
let range = sheet.getSelections()[0];
spread.calculate(GC.Spread.Sheets.CalculationType[type], sheet.name()+"!"+GC.Spread.Sheets.CalcEngine.rangeToFormula(range));
});
}
function _getElementById(id) {
return document.getElementById(id);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="spreadjs culture" content="ko-kr"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.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 id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="option-row">
<input style="width: 20px;float: left;" type="checkbox" id="enableCalcService" checked="checked"/>
<label for="enableCalcService">enable Calculation Service</label>
</div>
<div class="option-row">
<p>Change the Calculation Mode and input formulas to see the calculation behavior. </p>
<label for="calculationMode">Calculation Mode</label>
<select id="calculationMode">
<option value="0">Automatic</option>
<option value="1">Manual</option>
</select>
</div>
<div class="option-row">
<p>Check the different calculate scopes with different calculation types in different calculation modes. </p>
<label for="calculationType">Calculation Type</label>
<select id="calculationType">
<option value="all">All</option>
<option value="rebuild">Rebuild</option>
<option value="minimal">Minimal</option>
<option value="regular">Regular</option>
</select>
<button id="calculateSpread">Calculate Spread</button>
<br />
<button id="calculateSheet">Calculate Sheet</button>
<br />
<button id="calculateRange">Calculate Selection</button>
</div>
</div>
</div></body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
input {
margin-bottom: 5px;
padding: 2px 4px;
width: 100%;
box-sizing: border-box;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}