概述
本 Demo 展示了如何在工作表中创建按钮表单控件，并设置按钮的文本内容、样式属性（字体、颜色、对齐方式），以及绑定按钮点击事件来响应用户交互。
实现思路
使用 addFormControl 方法创建按钮类型的表单控件
通过 text() 方法设置按钮显示的文本内容
获取按钮样式对象，配置文本效果（字体、颜色）和对齐方式
应用样式配置
绑定 FormControlButtonClicked 事件，处理按钮点击
代码解析
创建按钮表单控件
使用 addFormControl 方法创建按钮控件。参数依次为：控件名称、控件类型（FormControlType.button）、左侧位置、顶部位置、宽度、高度。
设置按钮文本和样式
text() 方法设置按钮上显示的文本内容
style() 方法获取样式对象，配置后需要重新应用
textEffect.color 设置文本颜色
textEffect.font 设置文本字体样式
textFrame.vAlign 和 textFrame.hAlign 分别设置垂直和水平对齐方式
绑定按钮点击事件
通过 bind 方法绑定 FormControlButtonClicked 事件，当按钮被点击时触发回调函数，参数 args 包含事件相关信息。
运行效果
工作表中显示一个按钮控件，文本内容为"点击"
按钮文本以黑色粗体 21px Calibri 字体显示，水平和垂直居中
点击按钮会弹出提示框，显示"按钮已点击…"
API 参考
addFormControl 方法
name: 形状的名称
formControlType: 表单控件类型，使用 GC.Spread.Sheets.Shapes.FormControlType 枚举
left?: 左侧位置（可选）
top?: 顶部位置（可选）
width?: 宽度（可选）
height?: 高度（可选）
FormControlButtonClicked 事件
当按钮表单控件被点击时触发，事件参数包含：
sheet: 触发事件的工作表
sheetName: 工作表名称
shape: 触发事件的形状对象
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 button = sheet.shapes.addFormControl("button", GC.Spread.Sheets.Shapes.FormControlType.button, 50, 50, 160, 100);
button.text("点击");
var style = button.style();
style.textEffect.color = "rgb(0, 0, 0)";
style.textEffect.font = "bold 21px Calibri";
style.textFrame.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style.textFrame.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
button.style(style);
sheet.bind(GC.Spread.Sheets.Events.FormControlButtonClicked, function (s, args) {
alert("按钮已点击...");
});
}
<!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;
}
