概述
本 Demo 展示了如何创建和使用单选按钮表单控件，包括设置按钮文本、样式、单元格链接，以及使用分组框组织多个单选按钮。Demo 中演示了两组单选按钮：性别选择（男/女）和联系方式选择（邮箱/电话），并监听值变化事件。
实现思路
创建两个独立的单选按钮“男”和“女”，设置文本、单元格链接和默认选中状态
为“女”按钮设置自定义样式（绿色填充、红色边框）
创建一个分组框“联系方式”，在其中添加两个单选按钮“邮箱”和“电话”
为分组框内的单选按钮设置单元格链接和默认选中状态
绑定 FormControlValueChanged 事件，监听单选按钮值的变化
代码解析
创建单选按钮并设置基本属性
这段代码创建了一个名为“男”的单选按钮，位置在 (50, 50)，尺寸为 100x30。通过 text() 方法设置显示文本，通过 options() 方法获取选项对象并设置单元格链接到 C1，最后使用 value(true) 将其设置为选中状态。
设置单选按钮样式
这段代码为“女”按钮设置自定义样式。填充类型为实心，颜色为绿色，透明度 0.5；边框颜色为红色，透明度 0.5，宽度为 2 像素。
使用分组框组织单选按钮
这段代码创建了一个分组框“联系方式”，然后在其中添加两个单选按钮“邮箱”和“电话”。同一分组框内的单选按钮自动成为一组，实现互斥选择。
监听值变化事件
这段代码绑定了 FormControlValueChanged 事件，当单选按钮的值发生变化时，会在控制台输出新值。
运行效果
表格上方显示两个单选按钮“男”和“女”，点击时互斥选择，选中状态会联动到单元格 C1
“女”按钮显示为绿色填充、红色边框
表格中间有一个分组框“联系方式”，包含“邮箱”和“电话”两个单选按钮
点击分组框内的单选按钮时，选中状态会联动到单元格 C6
每次点击单选按钮时，控制台会输出值变化信息
API 参考
addFormControl 方法
name：形状的名称（字符串）
formControlType：表单控件类型，如 GC.Spread.Sheets.Shapes.FormControlType.optionButton
left、top：控件左上角的坐标（可选）
width、height：控件的宽度和高度（可选）
FormControlShape 常用方法
text(text)：设置或获取控件的显示文本
options(options?)：设置或获取控件的选项，包括 cellLink（单元格链接）等属性
value(value?)：设置或获取控件的值，单选按钮使用布尔值
style(style?)：设置或获取控件的样式对象
FormControlValueChanged 事件
当表单控件的值发生变化时触发，事件参数 args 包含 newValue 属性表示新值。
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 maleOptionButton = sheet.shapes.addFormControl("male", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 50, 50, 100, 30);
maleOptionButton.text("男");
var options = maleOptionButton.options();
options.cellLink = "C1";
maleOptionButton.options(options);
maleOptionButton.value(true);
var femaleOptionButton = sheet.shapes.addFormControl("female", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 160, 50, 100, 30);
femaleOptionButton.text("女");
var style = femaleOptionButton.style();
style.fill.type = GC.Spread.Sheets.Shapes.ShapeFillType.solid;
style.fill.color = "green";
style.fill.transparency = 0.5;
style.line.color = "red";
style.line.transparency = 0.5;
style.line.width = 2;
femaleOptionButton.style(style);
var contactMethod = sheet.shapes.addFormControl("email", GC.Spread.Sheets.Shapes.FormControlType.groupBox, 40, 130, 240, 80);
contactMethod.text("联系方式");
var email = sheet.shapes.addFormControl("email", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 50, 160, 100, 30);
email.text("邮箱");
var phone = sheet.shapes.addFormControl("phone", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 160, 160, 100, 30);
phone.text("电话");
options = phone.options();
options.cellLink = "C6";
phone.options(options);
phone.value(true);
sheet.bind(GC.Spread.Sheets.Events.FormControlValueChanged, function (s, args) {
console.log("值已更改...", args.newValue);
});
}
<!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;
}
