After the user changes the sheet, the Spread component needs to deal with these changes and paint a new sheet.
You can use the repaint method to repaint the sheet.
Most of the time, after you change the sheet, the component will auto refresh to respond to the changes. If you make a lot of changes at one time, but don't want the sheet to repaint many times, then you can use the suspendPaint method to stop the automatic repaint until the changes are complete. Then call the resumePaint method to redraw the sheet, as shown in the following example:
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {
sheetCount: 1
});
var spreadNS = GC.Spread.Sheets;
document.getElementById("setValue").addEventListener('click',function() {
var sheet = spread.getActiveSheet();
var cellRange = sheet.getSelections()[0];
var salesData = [
["Salesperson", "Region", "Sales Amount", "Commission %", "Commission Amount"],
["Joe", "North", 260, '10%', 26],
["Robert", "South", 660, '15%', 99],
["Michelle", "East", 940, '15%', 141],
["Erich", "West", 410, '12%', 49.2],
["Dafna", "North", 800, '15%', 120],
["Rob", "South", 900, '15%', 135]
];
if (cellRange) {
for (var row = cellRange.row, rowCount = cellRange.row + cellRange.rowCount; row < rowCount; row++) {
for (var col = cellRange.col, colCount = cellRange.col + cellRange.colCount; col < colCount; col++) {
sheet.setArray(row, col, salesData);
sheet.getCell(row, col).foreColor("lightGreen");
sheet.getCell(row, ++col).foreColor("lightGreen");
sheet.getCell(row, ++col).foreColor("lightGreen");
sheet.getCell(row, ++col).foreColor("lightGreen");
sheet.getCell(row, ++col).foreColor("lightGreen");
}
}
}
});
document.getElementById("suspendPaint").addEventListener('click',function() {
spread.suspendPaint();
});
document.getElementById("resumePaint").addEventListener('click',function() {
spread.resumePaint();
});
};
<!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/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 type="button" id="suspendPaint" value="Suspend Paint" />
<label>1. Suspend the paint of Workbook</label>
</div>
<div class="option-row">
<input type="button" id="setValue" value="Set Value Array" />
<label>2. Set a range set of values on the sheet</label>
</div>
<div class="option-row">
<input type="button" id="resumePaint" value="Resume Paint" />
<label>3. Resume the paint of Workbook</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: 6px;
display: block;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
