For example, you can get an instance of a cell by specifying its row index and column index.
You also can get a series of cells in a range of the sheet area. There are two way to get range:
If you want to get a cell's position, width, or height, use the getCellRect method. This method returns the rectangle of the cell.
The spread provides a referenceStyle property. It sets the ReferenceStyle enumeration, which provides two settings:
a1
r1c1
The property sets the style of cell formulas and its default value is ReferenceStyle.a1. The appearance is the same as Excel. Use the following code to change the setting:
The sheet has an allowCellOverflow property; its default value is false. When this property's value has been set to true, the cell's data will overflow into adjacent empty cells. Use the following code to change the property's value:
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'));
var spreadNS = GC.Spread.Sheets;
var sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.defaults.colWidth = 120;
sheet.setColumnWidth(1, 200);
sheet.setValue(0, 0, 12);
sheet.setValue(1, 0, 13);
sheet.setValue(2, 0, 14);
sheet.setValue(3, 0, 15);
sheet.setValue(5, 0, 'ReferenceStyle');
sheet.setValue(6, 0, 'A1');
sheet.setValue(5, 1, 'Formula:');
sheet.setFormula(6, 1, '=FORMULATEXT(C7)');
sheet.setValue(5, 2, 'Result:');
sheet.setFormula(6, 2, 'SUM(A4:A8)');
sheet.getCell(9, 2, 'textAlignment');
sheet.getCell(10, 2).value('This text is left aligned in the cell').hAlign(3);
sheet.getCell(11, 2).value('This text is centered in the cell').hAlign(1);
sheet.getCell(12, 2).value('This text is right aligned in the cell').hAlign(2);
sheet.getCell(13, 2).value('This text is centerContinues aligned in the cell').hAlign(4);
sheet.resumePaint();
document.getElementById('referenceStyle').addEventListener('change', function() {
var referenceStyleValue = this.value;
var referenceStyle = spreadNS.ReferenceStyle[referenceStyleValue];
spread.options.referenceStyle = referenceStyle;
spread.getActiveSheet().recalcAll();
sheet.getCell(6, 0).value(referenceStyleValue.toLocaleLowerCase() === 'a1' ? 'A1' : 'R1C1');
});
document.getElementById('chkAllowCellOverFlow').addEventListener('click', function() {
var sheet = spread.getActiveSheet();
if (sheet) {
sheet.options.allowCellOverflow = this.checked;
}
});
};
<!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="position">
<P>The reference style is defined as 'A1' and 'R1C1', the rows and the columns on the worksheet are numbered.</P>
<P>If you change the reference style, the formula's reference will change too.</P>
<label for="referenceStyle">ReferenceStyle:</label>
<select id="referenceStyle" style="margin: 0 20px 0 6px">
<option value="a1">A1</option>
<option value="r1c1">R1C1</option>
</select>
</div>
<div style="padding-top: 16px">
<input type="checkbox" id="chkAllowCellOverFlow" checked="checked"/>
<label for="chkAllowCellOverFlow">AllowCellOverFlow</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 {
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;
}
