[表格编辑器]旋转器（Spinner）按钮的实现

收藏

组件化表格编辑器发布至今已经有比较长的时间了，相信大家基本都会添加一些简单的按钮，像是checkbox、下拉按钮等。那这篇文章主要介绍一个特殊的类型，叫做Spinner，可以理解为旋转器，或者叫微调器。
像是页面布局

image.png751986388.png

以及单元格格式里面都会用到这个类型
image.png716426391.png

作用是什么呢？顾名思义就是用于调整一些需要微调的属性，例如缩放比例、边距、缩进等。当然，你也可以根据需求开阔更多使用场景。

那么怎么添加呢？方法和定义普通的button的类似，我们需要指定一个type为spinner，并且给定一个commandOptions对象。里面包含可以配置旋转器的最大最小值以及步长。

type: "spinner",
commandOptions: {
numberEditorOption: {
min: 10,
max: 400,
step: 5,
}
},

复制代码

最后就是处理execute和getState方法，可能有一些朋友对getState方法不太理解。可以简单理解为刷UI的时候会触发这个方法，这个是为了保证ribbon的状态能够更新。下面的checked是我们可以获取并调整个的旋转器的值。

execute: function (context, propertyName, checked) {
context.setData('spinnerVal', checked);
},
getState: function (context, propertyName) {
var result = context.getData('spinnerVal');
return result ? result : 0;
}

复制代码

实现效果如图

下载附件即可查看完整demo。

spinner.html (2.69 KB, 下载次数: 21)

		自动登录	找回密码
密码			立即注册

[表格编辑器]旋转器（Spinner）按钮的实现

0 个回复

SpreadJS 高级认证

讲师达人

GrapeCity

悬赏达人

SpreadJS 认证