概述
本 Demo 展示了如何在工作表中创建复选框表单控件形状,并设置其文本标签、单元格链接、样式和事件监听。Demo 中创建了一个带有自定义样式的复选框,并将其链接到单元格 C1,实现了点击复选框时自动更新单元格值的功能。
实现思路
使用 addFormControl 方法创建复选框表单控件
使用 text 方法设置复选框显示的文本标签
使用 options 方法获取选项对象,设置 cellLink 属性实现单元格链接
使用 style 方法获取样式对象,设置填充色、透明度和边框样式
绑定 FormControlValueChanged 事件监听复选框值变化
代码解析
创建复选框表单控件
这段代码通过 sheet.shapes.addFormControl 方法创建一个复选框控件。参数依次为:控件名称、控件类型(FormControlType.checkBox)、左侧位置、顶部位置、宽度、高度。
设置复选框文本和单元格链接
text 方法设置复选框旁显示的文本标签。options 方法用于获取或设置复选框的选项,其中 cellLink 属性指定了链接的单元格地址,当用户勾选或取消勾选复选框时,该单元格的值会自动更新为 true 或 false。
设置复选框样式
通过 style 方法获取样式对象后,可以设置复选框的外观样式。fill 属性控制填充效果,包括填充类型(纯色)、颜色(绿色)和透明度(0.5 表示 50% 透明)。line 属性控制边框样式,包括颜色(红色)、透明度和线宽。
绑定值变更事件
使用 sheet.bind 方法绑定 FormControlValueChanged 事件,当复选框的值发生变化时触发回调函数,通过 args.newValue 可以获取最新的复选框状态(布尔值)。
运行效果
工作表中显示一个带有绿色半透明填充和红色边框的复选框
复选框右侧显示文本标签"足球"
点击复选框进行勾选或取消勾选操作
单元格 C1 会自动更新为复选框的当前状态(true 或 false)
每次值变化时,控制台会输出"值已更改…"以及新的值
API 参考
addFormControl 方法
name:控件名称
formControlType:表单控件类型,复选框使用 GC.Spread.Sheets.Shapes.FormControlType.checkBox
left、top:控件左上角的位置
width、height:控件的宽度和高度
options 方法
cellLink:字符串类型,指定链接的单元格地址(如 "C1")
style 方法
fill.type:填充类型(ShapeFillType.solid 表示纯色填充)
fill.color:填充颜色
fill.transparency:透明度(0-1 之间,0 表示不透明,1 表示完全透明)
line.color:边框颜色
line.width:边框宽度
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 checkBox = sheet.shapes.addFormControl("check box", GC.Spread.Sheets.Shapes.FormControlType.checkBox, 50, 50, 100, 30);
checkBox.text("足球");
var options = checkBox.options();
options.cellLink = "C1";
checkBox.options(options);
var style = checkBox.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;
checkBox.style(style);
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 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;
}