SpreadJSV14.2.0新特性解析 - 设计器之ribbon中自定义组件

收藏 · 2022-10-11 14:37 上传

本帖最后由 Lynn.Dou 于 2022-10-11 14:37 编辑

组件版编辑器 V14.2新增了自定义组件的功能，本篇教程就带领大家一起来学习下。

背景：
客户在使用designer时希望在工具栏中添加一个日期选择器控件，用于在单元格中设置日期。
在之前的designer中对于控件的支持很有限，因此在V14.2.0中对此做了增强。
事实上，不仅仅是在工具栏，在对话框中也支持添加自定义组件，
接下来就使用新版本来尝试实现这个需求。

先来看下组件相关生命周期：

image.png545635680.png

准备工作：

组件版编辑器： V14.2.0

日期选择器组件： DateTimePicker

教程：在工具栏中添加日期选择器组件

1、构建组件类结构

function DateTimePicker() {
GC.Spread.Sheets.Designer.AtomicComponentBase.call(this, ...arguments)
};
// 继承AtomicComponentBase
DateTimePicker.prototype = new GC.Spread.Sheets.Designer.AtomicComponentBase();

复制代码

2、实现组件

getTemplate ：在getTemplate方法中定义组件的innerHTML

DateTimePicker.prototype.getTemplate = function(options) {
return `
<div class="input-append date" style="margin-top: 35px;">
<input size="20" class ='form_datetime' type="text">
</div>
`;
}

复制代码

onMounted ：在此事件中，宿主元素已加载到DOM中，可以在此添加事件侦听器

DateTimePicker.prototype.onMounted = function(host, options) {
// 初始化第三方组件：datepicker
$(".form_datetime", host).datepicker(options);
// 修改时触发raiseValueChanged事件。
$(".form_datetime", host).change((e) => {
this.raiseValueChanged()
})
}

复制代码

onValueChanged: 在sheet中value改变时会触发此事件，以此可以获取单元格的value提供给组件刷新UI

DateTimePicker.prototype.onValueChanged = function(prevValue, nextValue, host, options) {
// 在这里拿到选中的单元格的value，刷新组件UI显示值
$(".form_datetime", host).datepicker('setDate', (nextValue && nextValue.toLocaleString) ? nextValue.toLocaleString('en-us', {
year: 'numeric',
month: 'numeric',
day: 'numeric'
}) : "");
}

复制代码

updateValue：此函数在 raiseValueChanged() 之后被调用，获取组件值提供给designer使用

DateTimePicker.prototype.updateValue = function(host, options) {
var value = $(".form_datetime", host).datepicker('getDate')
if (value) {
return new Date(value);
}
return null;
}

复制代码

3、将自定义组件注册到desigenr中

GC.Spread.Sheets.Designer.Designer.RegisterComponent("DateTimePicker", DateTimePicker);

复制代码

4、定义ribbon命令

var dateTime = {
title: "set time",
text: "设置时间",
commandName: "dateTime",
type: 'DateTimePicker',
execute: (designer, propertyName, value) => {
let sheet = designer.getWorkbook().getActiveSheet();
if (sheet) {
var row = sheet.getActiveRowIndex();
var col = sheet.getActiveColumnIndex();
sheet.setValue(row, col, value);
}
},
getState: (designer) => {
var spread = designer.getWorkbook();
var sheet = spread.getActiveSheet();
var row = sheet.getActiveRowIndex();
var col = sheet.getActiveColumnIndex();
var value = sheet.getValue(row, col);
return value;
}
}

复制代码

5、注册命令

var config = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));
config.commandMap = {
cmdDateTimePicker: dateTime
}

复制代码

6、新增日期选择器选项卡

var command = {
text: "日期选择器",
id: "time",
buttonGroups: [{
label: "日期",
commandGroup: {
direction: "horizontal",
commands: ["cmdDateTimePicker"]
}
}]
};
config.ribbon.unshift(command);

复制代码

7、初始化designer

var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);

复制代码

至此代码完成，我们来看下实现效果吧。（如下方动图）

完整代码详见附件demo。

在下一篇文章中我们介绍在对话框中添加自定义组件。

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

SpreadJSV14.2.0新特性解析 - 设计器之ribbon中自定义组件

0 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人