SpreadJS supports cell level padding and cell labels.
You can add padding for the cell by setting the style cellPadding property. Cell padding has the same policy as CSS Padding. For example:
The value of the label is taken from the watermark, for this reason, you need to set a watermark value when setting a cell label. For example:
You can set the label style by setting the style labelOptions property. The labelOptions is an object and it has five properties:
alignment: The label position. There are six positions: topLeft, topCenter, topRight, bottomLeft, bottomCenter, and bottomRight. The default value is topLeft.
visibility: The label display mode, there are three display modes:
visible - Always show watermark in padding area, don't show watermark in cell area regardless of whether the cell has a value.
hidden - Don't show watermark in padding area, but show watermark in cell area with value condition.
auto - Show watermark in padding area when the cell has a value, show watermark in cell area when the cell does not have a value. This is the default display value.
font: The label font. If there is no labelFont value, the style's font value is used. If there is no font value, the sheet default font value is used.
foreColor: The label forecolor. If there is no labelForeColor value, the style's foreColor value is used. If there is no foreColor value, the forecolor is 'grey'.
margin: The label margin. The label margin has the same policy as the CSS margin. CSS has properties to specify the margin for each side of an element:
margin-top
margin-right
margin-bottom
margin-left
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), {
sheetCount: 2
});
initSpread(spread);
addCellType(spread);
};
function initSpread(spread) {
var sheet = spread.getActiveSheet();
spread.suspendPaint();
spread.options.showHorizontalScrollbar = false;
spread.options.showVerticalScrollbar = false;
spread.options.tabStripVisible = false;
spread.options.grayAreaBackColor = 'white';
sheet.options.isProtected = true;
sheet.options.gridline = {
showVerticalGridline: false,
showHorizontalGridline: true,
color: 'black'
};
sheet.options.rowHeaderVisible = false;
sheet.options.colHeaderVisible = false;
sheet.setRowCount(14);
sheet.setColumnCount(13);
initLayout(sheet);
setBorder(sheet);
spread.resumePaint();
}
function initLayout(sheet) {
var rowCount = sheet.getRowCount();
var colCount = sheet.getColumnCount();
var i;
for (i = 0; i < rowCount; i++) {
sheet.setRowHeight(i, 40);
}
sheet.setColumnWidth(0, 120);
sheet.setColumnWidth(1, 80);
i = 0;
sheet.addSpan(i++, 0, 1, colCount);
sheet.addSpan(i++, 0, 1, colCount);
sheet.addSpan(i++, 0, 1, colCount);
sheet.addSpan(i++, 0, 1, colCount);
sheet.addSpan(i++, 3, 1, colCount - 3);
sheet.addSpan(i++, 6, 1, 7);
sheet.addSpan(i, 0, 1, 6);
sheet.addSpan(i, 6, 1, 3);
sheet.addSpan(i++, 9, 1, 4);
sheet.addSpan(i, 0, 1, 6);
sheet.addSpan(i++, 6, 1, 7);
sheet.addSpan(i++, 0, 1, colCount);
sheet.addSpan(i, 0, 1, 6);
sheet.addSpan(i++, 6, 1, 7);
sheet.addSpan(i, 0, 1, colCount - 4);
sheet.addSpan(i++, colCount - 4, 1, 4);
sheet.addSpan(i, 0, 1, 3);
sheet.addSpan(i, 3, 1, 3);
sheet.addSpan(i, 6, 1, 3);
sheet.addSpan(i++, 9, 1, 4);
for (; i < rowCount; i++) {
sheet.addSpan(i, 0, 1, colCount);
}
}
function setBorder(sheet) {
sheet.getRange(2, -1, 1, -1).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thick), {
top: true
});
sheet.getRange(4, -1, 1, -1).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thick), {
top: true
});
sheet.getRange(4, 0, 1, 3).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), {
right: true
});
sheet.getRange(5, 0, 3, 6).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), {
right: true
});
sheet.getRange(6, 6, 1, 3).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), {
right: true
});
sheet
.getRange(9, -1, 0, -1)
.setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.medium), {
bottom: true
});
sheet.getRange(9, 0, 1, 6).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), {
right: true
});
sheet.getRange(10, 0, 2, 9).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), {
right: true
});
sheet.getRange(11, 0, 1, 3).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), {
right: true
});
sheet.getRange(11, 3, 1, 3).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), {
right: true
});
}
function getCheckBoxCellType(text) {
var c = new GC.Spread.Sheets.CellTypes.CheckBox();
c.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.right);
c.caption(text);
return c;
}
function getComboBoxCellType() {
var combo = new GC.Spread.Sheets.CellTypes.ComboBox();
combo.items([
{
text: 'China',
value: '1'
},
{
text: 'United States',
value: '2'
},
{
text: 'Japan',
value: '2'
},
{
text: 'Germany',
value: '2'
},
{
text: 'France',
value: '2'
},
{
text: 'England',
value: '2'
}
]);
combo.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.text);
return combo;
}
function getHyperLinkCellType(text, tooltip) {
var h = new GC.Spread.Sheets.CellTypes.HyperLink();
h.text(text);
h.linkToolTip(tooltip);
return h;
}
function addCellType(spread) {
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
sheet.getCell(0, 0).value('Example Form').font('bold 30px Arial');
sheet
.getCell(1, 0)
.value('Please open an account at')
.font('bold 18px Arial')
.vAlign(GC.Spread.Sheets.VerticalAlign.bottom);
sheet.getCell(2, 0).watermark('BRANCH NAME').locked(false).cellPadding('20 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 0'
});
sheet.getCell(3, 0).value('Personal Details').font('bold 18px Arial').vAlign(GC.Spread.Sheets.VerticalAlign.bottom);
sheet
.getCell(4, 0)
.watermark('MARITIAL STATUS')
.locked(false)
.cellType(getCheckBoxCellType('Married'))
.cellPadding('15 0 0 0')
.labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 0'
});
sheet.getCell(4, 1).locked(false).cellType(getCheckBoxCellType('Single')).cellPadding('15 0 0 0');
sheet.getCell(4, 3).watermark('FULL NAME').locked(false).cellPadding('15 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 1'
});
sheet
.getCell(5, 0)
.watermark('EDUCATION')
.locked(false)
.cellType(getCheckBoxCellType('Under graduate'))
.cellPadding('15 0 0 0')
.labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 0'
});
sheet.getCell(5, 1).locked(false).cellType(getCheckBoxCellType('Graduate')).cellPadding('15 0 0 0');
sheet.getCell(5, 2).locked(false).cellType(getCheckBoxCellType('Others')).cellPadding('15 0 0 0');
sheet
.getCell(5, 6)
.watermark('NATIONALITY')
.locked(false)
.cellType(getComboBoxCellType())
.cellPadding('15 0 0 10')
.labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 1'
});
sheet.getCell(6, 0).watermark('E-MAIL').locked(false).cellPadding('15 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 0'
});
sheet.getCell(6, 6).watermark('MOBILE NO.').locked(false).cellPadding('15 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 1'
});
sheet
.getCell(6, 9)
.watermark('EXISTING BANK ACCOUNT NO. (IF ANY)')
.locked(false)
.cellPadding('15 0 0 0')
.labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 1'
});
sheet
.getCell(7, 0)
.watermark('IN CASE OF A MINOR PLEASE PROVIDE DETAILS (NAME OF PARENT AND NATURAL GUARDIAN)')
.locked(false)
.cellPadding('15 0 0 0')
.labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 6 0 1'
});
sheet.getCell(7, 6).watermark('NAME OF FATHER/SPOUSE').locked(false).cellPadding('15 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 1'
});
sheet.getCell(8, 0).value('Residential address').font('18px Arial').vAlign(GC.Spread.Sheets.VerticalAlign.bottom);
sheet.getCell(9, 0).watermark('FLAT NO. AND BLDG. NAME').locked(false).cellPadding('15 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 0'
});
sheet.getCell(9, 6).watermark('ROAD NO./NAME').locked(false).cellPadding('15 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 1'
});
sheet.getCell(10, 0).watermark('AREA AND LANDMARK').locked(false).cellPadding('15 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 0'
});
sheet.getCell(10, 9).watermark('CITY').locked(false).cellPadding('15 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 1'
});
sheet.getCell(11, 0).watermark('TELEPHONE RESIDENCE').locked(false).cellPadding('15 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 0'
});
sheet.getCell(11, 3).watermark('OFFICE').locked(false).cellPadding('15 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 1'
});
sheet.getCell(11, 6).watermark('FAX').locked(false).cellPadding('15 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 1'
});
sheet.getCell(11, 9).watermark('PIN CODE').locked(false).cellPadding('15 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 1'
});
sheet.getCell(12, 0).value('Referenced web site').font('18px Arial').vAlign(GC.Spread.Sheets.VerticalAlign.bottom);
sheet
.getCell(13, 0)
.watermark('HELP MESSAGE')
.locked(false)
.cellType(getHyperLinkCellType('Any question, please click here.', 'help'))
.cellPadding('15 0 0 0')
.labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 0'
});
sheet.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" style="width:100%;height:100%"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
