概述
本 Demo 展示了如何添加和配置微调按钮表单控件，实现数值的快速调节。通过设置最小值、最大值、步长和单元格链接，用户可以方便地调整关联单元格中的数值。
实现思路
使用 addFormControl 方法添加微调按钮表单控件形状
通过 options 方法获取并配置微调按钮属性（最小值、最大值、步长、单元格链接）
使用 value 方法设置微调按钮的初始值
绑定 FormControlValueChanged 事件监听值的变化
代码解析
添加微调按钮
这行代码使用 addFormControl 方法创建一个微调按钮。参数依次为：控件名称、控件类型（FormControlType.spinButton）、左侧位置、顶部位置、宽度和高度。方法返回一个 FormControlShape 对象。
配置微调按钮属性
这段代码配置微调按钮的核心属性：
minValue：设置最小值为 0
maxValue：设置最大值为 50
step：设置每次点击的步长为 1
cellLink：将微调按钮关联到单元格 A1，按钮值的变化会自动同步到该单元格
设置初始值
使用 value 方法将微调按钮的初始值设置为 25。该值会同时更新到关联的单元格 A1 中。
绑定值变化事件
通过绑定 FormControlValueChanged 事件，可以监听微调按钮值的变化。事件处理函数的 args.newValue 参数包含变化后的新值。
运行效果
工作表中显示一个微调按钮控件
点击微调按钮的上下箭头可以调整数值（范围 0-50，步长为 1）
关联的单元格 A1 会同步显示微调按钮的当前值
控制台会输出值变化的消息和新值
API 参考
addFormControl 方法
name：表单控件名称
formControlType：控件类型，使用 GC.Spread.Sheets.Shapes.FormControlType 枚举
left、top：控件位置（可选）
width、height：控件大小（可选）
options 方法
获取或设置表单控件的选项配置。微调按钮支持的选项包括 minValue、maxValue、step 和 cellLink。
value 方法
获取或设置表单控件的当前值。
window.onload = function () {
var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
workbook.suspendPaint();
initSheet1(workbook.getSheet(0));
workbook.resumePaint();
};
function initSheet1(sheet) {
var spinButton = sheet.shapes.addFormControl("spin button", GC.Spread.Sheets.Shapes.FormControlType.spinButton, 50, 50, 160, 100);
var options = spinButton.options();
options.minValue = 0;
options.maxValue = 50;
options.step = 1;
options.cellLink = "A1";
spinButton.options(options);
spinButton.value(25);
sheet.bind(GC.Spread.Sheets.Events.FormControlValueChanged, function (s, args) {
console.log("value changed...", args.newValue);
});
}
<!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$/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;
}
