找回密码
 立即注册

QQ登录

只需一步,快速开始

本帖最后由 Richard.Ma 于 2022-12-7 15:59 编辑

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

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

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

SpreadJS支持的表格组件
1.按钮
image.png418683165.png

2.微调按钮
image.png662255553.png

3.列表框
image.png395510253.png

4.组合框
image.png86709288.png

5.复选框
image.png398652343.png

6.单选框
image.png155623778.png

7.分组框
image.png45741271.png

8.标签
image.png381219786.png

9.滚动条
image.png539985961.png


基础用法
以添加一个微调按钮为例
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其他空白的地方,即可恢复表单组件正常显示和功能
image.png572554931.png image.png810840148.png image.png790295715.png
image.png507416991.png image.png49517821.png

image.png486268310.png

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部