组件化表格编辑器发布至今已经有比较长的时间了，相信大家基本都会添加一些简单的按钮，像是checkbox、下拉按钮等。那这篇文章主要介绍一个特殊的类型，叫做Spinner，可以理解为旋转器，或者叫微调器。
像是页面布局
以及单元格格式里面都会用到这个类型
作用是什么呢？顾名思义就是用于调整一些需要微调的属性，例如缩放比例、边距、缩进等。当然，你也可以根据需求开阔更多使用场景。
那么怎么添加呢？方法和定义普通的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, 下载次数: 113)
|
|
陕公网安备：61019002000258 |
隐私政策 |
网站地图