概述
本 Demo 展示了如何使用单元格内边距和标签功能构建一个专业的银行开户表单。通过 cellPadding 属性设置单元格内边距，并结合 watermark 属性和 labelOptions 配置，在单元格的内边距区域显示字段标签，实现了清晰的表单布局。
实现思路
初始化 SpreadJS 工作簿，隐藏滚动条、标签栏等界面元素，创建简洁的表单界面
合并单元格并调整行高列宽，构建表单的整体布局结构
为各个表单字段设置单元格内边距（cellPadding），为标签预留显示空间
通过 watermark 属性设置标签文本内容
使用 labelOptions 配置标签的字体、颜色、边距和可见性，使标签显示在内边距区域
应用不同的单元格类型（CheckBox、ComboBox、HyperLink）丰富表单交互功能
代码解析
设置单元格内边距
这段代码为单元格设置了内边距和标签。cellPadding('20 0 0 0') 在单元格上方添加 20 像素的内边距，watermark('BRANCH NAME') 设置标签文本，labelOptions 配置标签样式。visibility: 0 对应 GC.Spread.Sheets.LabelVisibility.visible，表示标签始终显示在内边距区域。
为下拉框单元格设置标签
这段代码为 ComboBox 类型的单元格设置标签。cellType(getComboBoxCellType()) 将单元格设置为下拉框类型，标签依然显示在内边距区域，不影响单元格内容的显示。
为超链接单元格设置标签
这段代码为 HyperLink 类型的单元格设置标签。标签 "HELP MESSAGE" 显示在超链接文本上方，引导用户点击链接获取帮助。
运行效果
表单顶部显示 "Example Form" 标题，下方依次展示分支名称、个人信息、地址等字段
每个字段上方都有清晰的标签说明（如 BRANCH NAME、FULL NAME、E-MAIL 等）
部分字段使用特殊的单元格类型：
婚姻状况和教育程度使用复选框
国籍使用下拉框选择
底部提供超链接获取帮助
标签显示在单元格的内边距区域，与输入内容分离，提升表单的可读性
API 参考
cellPadding 属性
value：字符串类型，表示单元格内边距。格式与 CSS padding 相同，支持 "10"、"10 20"、"10 20 10 20" 等形式
watermark 属性
value：字符串类型，水印文本内容。当与 labelOptions 配合使用时，作为单元格标签文本
labelOptions 属性
alignment：标签位置，支持 topLeft、topCenter、topRight、bottomLeft、bottomCenter、bottomRight
visibility：标签可见性，0 表示 visible（始终显示在内边距区域），1 表示 hidden（隐藏标签），2 表示 auto（根据单元格是否有值自动切换显示位置）
font：标签字体样式
foreColor：标签前景色（字体颜色）
margin：标签外边距，格式与 CSS margin 相同
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 name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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;
}
