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
var DateTimePickerTemplateJson = {
templateName: "DateTimePicker",
title: "Set Date Time",
content: [{
type: "FlexContainer",
children: [{
type: "TextBlock",
text: "设置日期时间",
margin: "1px -4px"
}, {
type: "DateTimePicker",
bindingPath: "date", // 绑定路径，按照此路径设置并获取此组件值
firstDay: 3, // DateTimePicker的所有选项都可以在这里设置，这里只是示例（第一天显示周三）
}, {
type: "TextBlock",
text: "选择单元格区域",
margin: "5px -4px"
}, {
type: "RangeSelect",
title: "Choose The Position To Set",
absoluteReference: true,
needSheetName: false,
margin: "5px -5px",
bindingPath: 'range'
}]
}]
};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 && ranges.ranges && ranges.ranges instanceof GC.Spread.Sheets.Range) {
let range = ranges.ranges;
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、注册命令var config = GC.Spread.Sheets.Designer.DefaultConfig;
config.commandMap = {
cmdDateTimeDialog: dateTimeDialog
}6、新增选项卡，添加日期选择器按钮var command = {
text: "日期选择器",
id: "time",
buttonGroups: [{
label: "日期",
commandGroup: {
direction: "horizontal",
commands: ["cmdDateTimeDialog"]
}
}]
};
config.ribbon.unshift(command);7、初始化designervar designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);看下实现效果~（如动图）
完整代码见附件demo。
页:
[1]