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

收藏

本帖最后由 Lynn.Dou 于 2021-10-8 09:25 编辑

在上篇文章中我们介绍了如何在工具栏中添加日期选择器组件，
在本篇文章来领大家学习如何实现在对话框dialog中添加自定义组件-日期选择器。

准备工作：

组件版编辑器： V14.2.0

日期选择器组件： DateTimePicker

教程：

1、与上一篇教程一样，首先实现日期选择器组件，并注册到designer中

function DateTimePicker() {
GC.Spread.Sheets.Designer.AtomicComponentBase.call(this, ...arguments)
};
DateTimePicker.prototype = new GC.Spread.Sheets.Designer.AtomicComponentBase();
DateTimePicker.prototype.getTemplate = function(options) {
return `
<div class="input-append date" style="margin-top: 10px;">
<input size="20" class ='form_datetime' type="text">
</div>
`;
}
// 挂载
DateTimePicker.prototype.onMounted = function(host, options) {
$(".form_datetime", host).datepicker(options);
$(".form_datetime", host).change((e) => {
this.raiseValueChanged()
})
}
// 刷新组件UI
DateTimePicker.prototype.onValueChanged = function(prevValue, nextValue, host, options) {
$(".form_datetime", host).datepicker('setDate', (nextValue && nextValue.toLocaleString) ? nextValue.toLocaleString('en-us', {
year: 'numeric',
month: 'numeric',
day: 'numeric'
}) : "");
}
// 组件值更改时调用此函数，获取组件提供给designer使用
DateTimePicker.prototype.updateValue = function(host, options) {
var value = $(".form_datetime", host).datepicker('getDate')
if (value) {
return new Date(value);
}
return null;
}
// 将自定义组件注册到designer中
GC.Spread.Sheets.Designer.Designer.RegisterComponent("DateTimePicker", DateTimePicker);

复制代码

2、按照一定的结构自定义对话框模板

其中，

templateName ：模板名称

title：标题

content：模板内容

bindingPath 为绑定的路径，以此获取日期选择器组件的value

复制代码

3、注册模板

GC.Spread.Sheets.Designer.registerTemplate("DateTimePicker", DateTimePickerTemplateJson);

复制代码

4、定义命令

其中：

commandName：命令名称

iconClass：图标

execute：点击按钮时执行的方法

var dateTimeDialog = {
title: "set time dialog",
text: "日期选择器",
commandName: "dateTimeDialog",
iconClass: "ribbon-button-datetimepicker-dropdown", // 图标，仅作示例。
bigButton: true,
type: 'button', // 点击按钮时，将执行execute方法
execute: (context, propertyName) => {
GC.Spread.Sheets.Designer.showDialog("DateTimePicker", { // 弹出 DateTimePicker模板
range: "=$A$1" // 设置默认值为A1单元格。
}, (result) => { // susscess回调，获取 date range值。
// result : DateTimePickerTemplateJson 中 BindingPath 对应的数据
// 给选择的单元格区域赋值
let spread = context.getWorkbook();
let sheet = spread.getActiveSheet();
let ranges = GC.Spread.Sheets.CalcEngine.formulaToRanges(sheet, result.range);
if (ranges[0] && ranges[0].ranges && ranges[0].ranges[0] instanceof GC.Spread.Sheets.Range) {
let range = ranges[0].ranges[0];
sheet.setValue(range.row, range.col, result.date);
}
}, (e) => { // error 回调
console.log(e);
}, (result) => { // 有效回调，用于检查结果值是否有效。否则，对话框将不会关闭。
let date = result.date;
return date && date instanceof Date && !isNaN(Number(date));
});
}
}

复制代码

5、注册命令

复制代码

6、新增选项卡，添加日期选择器按钮

复制代码

7、初始化designer

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

复制代码

看下实现效果~

（如动图）

完整代码见附件demo。

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

0 个回复