SpreadJS automatically repaints after every update that impacts the workbook's current visible area. This includes adding or removing rows, columns or sheets. A best practice for SpreadJS developers, especially if your code makes many time-consuming changes to the workbook, is to suspend painting at the start of these operations and resume it at the end. This way, SpreadJS repaints only once after all the changes have been made which greatly improves the performance.
Use the suspendPaint method of the workbook object to suspend painting and resumePaint to resume it.
You can force a repaint if your code makes changes in the SpreadJS component that do not cause the component to repaint on its own.
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 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$/spread/source/data/data.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;
}
