复选框表单控件

SpreadJS 支持在工作表中添加可交互的复选框表单控件。该控件支持单元格链接与数据双向绑定,允许自定义文本标签及样式,适用于问卷调查或选项勾选等业务场景。

概述 本 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; }