SpreadJS는 행, 열 또는 시트를 추가하거나 제거하는 것과 같이 코드가 통합 문서를 변경한 후 매번 자동으로 다시 칠합니다. 특히 코드가 통합 문서를 많이 변경하는 경우 SpreadJS 개발자를 위한 모범 사례는 코드 시작 시 칠하기를 일시 중단하고 종료 시 칠하기를 다시 시작하는 것입니다. 이렇게 하면 SpreadJS는 모든 변경이 수행된 후 한 번만 다시 칠하므로 성능이 크게 향상됩니다.
workbook 개체의 suspendPaint 메서드를 사용하여 칠하기를 일시 중단하고 resumePaint를 사용하여 다시 시작합니다.
컴포넌트가 자체적으로 다시 칠하지 않아도 되는 SpreadJS 컴포넌트에서 코드가 변경을 수행하는 경우 강제로 다시 칠할 수 있습니다.
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 1 });
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
spread.getSheet(0);
var sheet = spread.getActiveSheet();
spread.resumePaint();
_getElementById('btnAddSheet').addEventListener('click', function() {
spread.addSheet(0);
});
_getElementById('suspendPaint').addEventListener('click', function() {
spread.suspendPaint();
});
_getElementById('resumePaint').addEventListener('click', function() {
spread.resumePaint();
});
}
function _getElementById(id){
return document.getElementById(id);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="ko-kr"/>
<meta charset="utf-8" />
<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$/spread/source/data/data.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">
<label>Click buttons to suspend and resume painting the Spread component, and see how actions are affected by that state.</label>
</div>
1. Click 'Suspend Paint' <input type="button" id="suspendPaint" value="Suspend Paint"/>
<br />
2. Add various sheets <input type="button" id="btnAddSheet" value="Add Sheet" />
<br />
3. Click 'Resume Paint' <input type="button" id="resumePaint" value="Resume Paint"/>
<div class="option-row">
<label>The rendering performance improves when using suspendPaint/ResumePaint functionality. </label>
</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;
}
label {
display: block;
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 16px;
display: block;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}