SpreadJSV14.2.0新特性解析 - 设计器之ribbon中自定义组件
本帖最后由 Lynn.Dou 于 2022-10-11 14:37 编辑组件版编辑器 V14.2新增了自定义组件的功能，本篇教程就带领大家一起来学习下。
背景：
客户在使用designer时希望在工具栏中添加一个日期选择器控件，用于在单元格中设置日期。
在之前的designer中对于控件的支持很有限，因此在V14.2.0中对此做了增强。
事实上，不仅仅是在工具栏，在对话框中也支持添加自定义组件，
接下来就使用新版本来尝试实现这个需求。
先来看下组件相关生命周期：
准备工作：
组件版编辑器： 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方法中定义组件的innerHTMLDateTimePicker.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提供给组件刷新UIDateTimePicker.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、初始化designervar designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);至此代码完成，我们来看下实现效果吧。（如下方动图）完整代码详见附件demo。
在下一篇文章中我们介绍在对话框中添加自定义组件。
页:
[1]