【SpreadJS v16.0 新特性预览】表单类控件支持（按钮、列表框、下拉框、单选、复选）

什么是表单控件

在网页或者客户端软件中，能经常看到按钮、列表框、下拉框、单选、复选等元素，这些组件可以让用户非常轻松的实现一些数据交互，

同样的在电子表格中，你也可以添加这些组件，用于和单元格中的数据进行交互。例如，在将列表框组件添加到工作表并将其链接到单元格后，您可以为控件中所选项目的当前位置返回一个数值。然后，您可以将该数值与 INDEX 函数结合使用，以从列表中选择不同的项目。

SpreadJS在V16中增加了表单组件的支持，具体支持的组件类型如下，都是常见的组件，操作方面就不再过多介绍了

SpreadJS支持的表格组件

1.按钮

2.微调按钮

3.列表框

4.组合框

5.复选框

6.单选框

7.分组框

8.标签

9.滚动条

基础用法

以添加一个微调按钮为例

1.添加微调按钮

1. var spin = sheet.shapes.addFormControl('spin', GC.Spread.Sheets.Shapes.FormControlType.spinButton, 50, 50, 100, 50);
   

复制代码

2.设置微调按钮选项

1. var options = spin.options();
   
2. options.minValue = 1;
   
3. options.maxValue = 36;
   
4. options.step = 1;
   
5. options.cellLink = "A1";
   
6. spin.options(options);

复制代码

3.设置微调按钮值

1. spin.value(18);

复制代码

4.绑定事件，对于微调按钮来说，可以给它绑定FormControlValueChanged事件，在点击按钮引起值变化后会触发事件

1. sheet.bind(GC.Spread.Sheets.Events.FormControlButtonClicked, function (s, args) {
   
2.     alert('button clicked...');
   
3. });

复制代码

其他UI操作

在创建这些表单组件后，除了可以通过鼠标左键点击或者拖动组件进行单元格数据交互操作，同时，也支持对组件的位置，尺寸进行调整

鼠标右键点击组件，即可显示组件的轮廓，此时可以通过鼠标左键拖动来改变表单组件位置。或者拖动边框改变尺寸，在完成修改后，再点击其他sheet其他空白的地方，即可恢复表单组件正常显示和功能