概述
本 Demo 展示了如何使用分组框表单控件对选项按钮进行分组,实现多组互斥选择功能。Demo 中创建了两组选项按钮:一组用于选择性别(男、女),另一组通过分组框组织,用于选择联系方式(邮箱、电话)。
实现思路
创建两个选项按钮用于性别选择,并设置单元格链接
创建一个分组框用于组织联系方式选择
在分组框内部创建两个选项按钮(邮箱、电话)
为其中一个选项按钮设置单元格链接和默认选中状态
代码解析
创建性别选择选项按钮
这段代码创建了两个选项按钮,并通过 cellLink 属性将它们链接到单元格 C1。由于这两个选项按钮在分组框外部,它们属于同一组,具有互斥选择行为。
创建分组框和内部选项按钮
这段代码创建了一个分组框,并在其内部添加了两个选项按钮。由于选项按钮的边界完全在分组框内部,它们自动形成另一组,与外部的性别选择组独立。
运行效果
顶部有两个选项按钮(男、女),点击其中一个会自动取消另一个的选择,选中值会显示在单元格 C1
中部有一个分组框"联系方式",内部包含两个选项按钮(邮箱、电话)
点击分组框内的选项按钮,它们之间互斥选择,选中值会显示在单元格 C6
两组选项按钮相互独立,互不影响
API 参考
addFormControl 方法
name: 控件名称
type: 控件类型,使用 GC.Spread.Sheets.Shapes.FormControlType 枚举
x、y: 控件在工作表中的位置
width、height: 控件的宽度和高度
FormControlType 枚举
optionButton: 选项按钮(单选按钮)
groupBox: 分组框
分组框的分组规则
同一分组框内的选项按钮属于同一组(选项按钮的边界必须完全在分组框内部)
分组框外部的所有选项按钮属于同一组
当一个选项按钮与单元格链接时,同一组的所有选项按钮都将与该单元格链接
cellLink 属性
通过 options().cellLink 设置选项按钮与单元格的链接,当选中状态改变时,单元格的值会相应更新。
value 方法
用于设置或获取选项按钮的选中状态,value(true) 表示选中。
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 male = sheet.shapes.addFormControl("male", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 50, 50, 100, 30);
male.text("男");
var options = male.options();
options.cellLink = "C1";
male.options(options);
male.value(true);
var female = sheet.shapes.addFormControl("female", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 160, 50, 100, 30);
female.text("女");
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);
}
<!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;
}
