概述
本 Demo 展示了 SpreadJS 支持的所有 9 种表单控件的使用方法，包括按钮、微调按钮、列表框、下拉列表框、复选框、选项按钮、标签、滚动条和分组框。通过一个完整的用户信息表单示例，演示了如何创建表单控件、设置属性、与单元格链接以及绑定事件。
实现思路
准备数据：在表格中设置部门列表、项目数据和公式计算
创建表单控件：使用 addFormControl 方法创建各种类型的表单控件
设置控件属性：配置文本、范围、单元格链接等属性
绑定事件：为按钮控件绑定点击事件，响应用户交互
代码解析
创建标签和微调按钮
这段代码创建了标签控件和微调按钮。微调按钮通过 cellLink 属性与单元格 C3 链接，当用户点击微调按钮时，单元格 C3 的值会自动更新。
创建选项按钮和复选框
选项按钮用于单选场景（如性别选择），复选框用于多选场景（如爱好选择）。通过 cellLink 属性，选中的值会同步到对应的单元格。
创建下拉列表框和列表框
下拉列表框和列表框都通过 inputRange 属性指定数据来源，通过 cellLink 属性将选中项的索引同步到单元格。
创建按钮并绑定事件
按钮控件可以绑定点击事件，当用户点击按钮时触发回调函数。
运行效果
点击年龄的微调按钮上下箭头，可以调整年龄值（范围 1-120），值自动同步到单元格 C3
选择性别（男/女），选中状态同步到单元格 A20，单元格会显示 TRUE 或 FALSE
勾选爱好（篮球/足球），选中状态分别同步到单元格 C20 和 D20
从部门下拉列表框或列表框中选择部门，选中项的索引同步到单元格 B20，右侧表格会根据索引显示对应的项目数据
拖动滚动条可以切换显示不同的项目数据（索引 1-5）
点击按钮会弹出提示框
表格下方的行会根据表单控件的选择动态显示对应的值
API 参考
addFormControl 方法
name：表单控件名称
formControlType：表单控件类型，使用 GC.Spread.Sheets.Shapes.FormControlType 枚举
left、top：控件位置
width、height：控件尺寸
FormControlType 枚举
支持的控件类型：
button：按钮
spinButton：微调按钮
listBox：列表框
comboBox：下拉列表框
checkBox：复选框
optionButton：选项按钮（单选）
groupBox：分组框
label：标签
scrollBar：滚动条
options 方法
用于获取或设置表单控件的配置选项，常用属性：
cellLink：链接的单元格地址
inputRange：数据输入范围（用于 comboBox 和 listBox）
dropDownLines：下拉列表显示行数
minValue、maxValue：最小值和最大值（用于 spinButton 和 scrollBar）
事件
FormControlButtonClicked：按钮点击事件
FormControlValueChanged：表单控件值变化事件
window.onload = function () {
var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
workbook.suspendPaint();
initSheet1(workbook.getSheet(0));
workbook.resumePaint();
};
function initSheet1(sheet) {
setData(sheet);
setStyle(sheet);
setFormControl(sheet);
}
function setData(sheet) {
var departmentData = ["销售部", "编辑部", "研发部", "人事部", "财务部", "产品部", "市场部", "采购部"];
for (var i = 0; i < departmentData.length; i++) {
sheet.setValue(i, 12, departmentData[i]);
}
sheet.setValue(1, 2, "李明");
sheet.setArray(21, 0, [
["姓名", "年龄", "性别", "爱好", null, "部门"],
[null, null, null, "篮球", "足球", null],
]);
sheet.setArray(23, 0, [["=C2", "=C3", '=CHOOSE(A20, "男", "女")', '=IF(C20,"是","否")', '=IF(D20, "是", "否")', "=INDEX(M1:M8,B20)"]], true);
sheet.setArray(0, 13, [
["项目1", 67],
["项目2", 159],
["项目3", 177],
["项目4", 93],
["项目5", 166],
["项目6", 91],
["项目7", 57],
["项目8", 107],
["项目9", 92],
["项目10", 175],
]);
for (var i = 1; i <= 6; i++) {
sheet.setFormula(i, 7, "=INDEX(N" + i + ":N10, P1)");
sheet.setFormula(i, 8, "=INDEX(O" + i + ":O10, P1)");
}
}
function setStyle(sheet) {
sheet.defaults.colWidth = 70;
sheet.setColumnWidth(5, 80);
sheet.getRange(1, 0, 13, 5).backColor("#bdd7ee");
sheet.getRange(21, 0, 2, 6).backColor("#bdd7ee");
sheet.getRange(1, 2, 1, 2).hAlign(1);
sheet.getRange(21, 0, 3, 6).hAlign(1);
sheet.getRange(21, 0, 3, 6).vAlign(1);
sheet.addSpan(1, 2, 1, 2);
sheet.addSpan(21, 3, 1, 2);
sheet.addSpan(21, 0, 2, 1);
sheet.addSpan(21, 1, 2, 1);
sheet.addSpan(21, 2, 2, 1);
sheet.addSpan(21, 5, 2, 1);
sheet.conditionalFormats.addDataBarRule(
GC.Spread.Sheets.ConditionalFormatting.ScaleValueType.automin,
null,
GC.Spread.Sheets.ConditionalFormatting.ScaleValueType.automax,
null,
"green",
[new GC.Spread.Sheets.Range(1, 8, 6, 1)]
);
}
function setFormControl(sheet) {
var shapes = sheet.shapes;
var nameLabel = shapes.addFormControl("name", GC.Spread.Sheets.Shapes.FormControlType.label, 84, 20, 55, 20);
nameLabel.text("姓名：");
var ageLabel = shapes.addFormControl("age", GC.Spread.Sheets.Shapes.FormControlType.label, 96, 40, 55, 20);
ageLabel.text("年龄：");
var ageSpinBtn = shapes.addFormControl("spin", GC.Spread.Sheets.Shapes.FormControlType.spinButton, 210, 40, 70, 26);
var options = ageSpinBtn.options();
(options.cellLink = "C3"), (options.minValue = 1);
options.maxValue = 120;
ageSpinBtn.options(options);
ageSpinBtn.value(18);
var genderGroupBox = shapes.addFormControl("gender", GC.Spread.Sheets.Shapes.FormControlType.groupBox, 70, 80, 210, 60);
genderGroupBox.text("性别");
var male = shapes.addFormControl("male", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 90, 105, 90, 20);
male.text("男");
male.value(true);
var female = shapes.addFormControl("female", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 180, 105, 90, 20);
female.text("女");
options = female.options();
(options.cellLink = "A20"), female.options(options);
var likeGroupBox = shapes.addFormControl("like", GC.Spread.Sheets.Shapes.FormControlType.groupBox, 70, 160, 210, 60);
likeGroupBox.text("爱好");
var basketball = shapes.addFormControl("basketball", GC.Spread.Sheets.Shapes.FormControlType.checkBox, 90, 185, 90, 20);
basketball.text("篮球");
options = basketball.options();
(options.cellLink = "C20"), basketball.options(options);
var football = shapes.addFormControl("football", GC.Spread.Sheets.Shapes.FormControlType.checkBox, 180, 185, 90, 20);
football.text("足球");
options = football.options();
(options.cellLink = "D20"), football.options(options);
var departmentLabel = shapes.addFormControl("department label", GC.Spread.Sheets.Shapes.FormControlType.label, 69, 240, 80, 20);
departmentLabel.text("部门：");
var department = shapes.addFormControl("department", GC.Spread.Sheets.Shapes.FormControlType.comboBox, 150, 240, 130, 20);
options = department.options();
options.cellLink = "B20";
options.inputRange = "M1:M8";
options.dropDownLines = 5;
department.options(options);
department.value(1);
var scrollBar = shapes.addFormControl("scroll bar", GC.Spread.Sheets.Shapes.FormControlType.scrollBar, 642, 21, 24, 116);
options = scrollBar.options();
options.cellLink = "P1";
options.minValue = 1;
options.maxValue = 5;
scrollBar.options(options);
scrollBar.value(1);
var listBox = shapes.addFormControl("listBox", GC.Spread.Sheets.Shapes.FormControlType.listBox, 500, 200, 180, 100);
options = listBox.options();
options.cellLink = "B20";
options.inputRange = "M1:M8";
listBox.options(options);
var button = shapes.addFormControl("button", GC.Spread.Sheets.Shapes.FormControlType.button, 500, 380, 160, 100);
button.text("点击我");
sheet.bind(GC.Spread.Sheets.Events.FormControlButtonClicked, function (s, args) {
alert("按钮被点击了...");
});
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="spreadjs culture" content="zh-cn" />
<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$/zh/purejs/node_modules/@grapecity-software/spread-sheets-shapes/dist/gc.spread.sheets.shapes.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>
</body>
</html>
input[type="text"] {
width: 200px;
margin-right: 20px;
}
label {
display: inline-block;
width: 110px;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
label {
display: block;
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
display: block;
width:216px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
code {
border: 1px solid #000;
}
