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

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

准备工作：

组件版编辑器： V14.2.0

日期选择器组件： DateTimePicker

教程：

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

1. function DateTimePicker() {
   
2.     GC.Spread.Sheets.Designer.AtomicComponentBase.call(this, ...arguments)
   
3. };
   
4. DateTimePicker.prototype = new GC.Spread.Sheets.Designer.AtomicComponentBase();
   
5. 
   
6. DateTimePicker.prototype.getTemplate = function(options) {
   
7.     return `
   
8.         <div class="input-append date" style="margin-top: 10px;">
   
9.             <input size="20" class ='form_datetime' type="text">
   
10.         </div>
    
11.     `;
    
12. }
    
13. 
    
14. // 挂载
    
15. DateTimePicker.prototype.onMounted = function(host, options) {
    
16.     $(".form_datetime", host).datepicker(options);
    
17.     $(".form_datetime", host).change((e) => {
    
18.         this.raiseValueChanged()
    
19.     })
    
20. }
    
21. 
    
22. // 刷新组件UI
    
23. DateTimePicker.prototype.onValueChanged = function(prevValue, nextValue, host, options) {
    
24.     $(".form_datetime", host).datepicker('setDate', (nextValue && nextValue.toLocaleString) ? nextValue.toLocaleString('en-us', {
    
25.         year: 'numeric',
    
26.         month: 'numeric',
    
27.         day: 'numeric'
    
28.     }) : "");
    
29. }
    
30. 
    
31. // 组件值更改时调用此函数，获取组件提供给designer使用
    
32. DateTimePicker.prototype.updateValue = function(host, options) {
    
33.     var value = $(".form_datetime", host).datepicker('getDate')
    
34.     if (value) {
    
35.         return new Date(value);
    
36.     }
    
37.     return null;
    
38. }
    
39. 
    
40. // 将自定义组件注册到designer中
    
41. GC.Spread.Sheets.Designer.Designer.RegisterComponent("DateTimePicker", DateTimePicker);

复制代码

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

其中，

templateName ： 模板名称

title： 标题

content：模板内容

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

1. var DateTimePickerTemplateJson = {
   
2.     templateName: "DateTimePicker",
   
3.     title: "Set Date Time",
   
4.     content: [{
   
5.         type: "FlexContainer",
   
6.         children: [{
   
7.             type: "TextBlock",
   
8.             text: "设置日期时间",
   
9.             margin: "1px -4px"
   
10.         }, {
    
11.             type: "DateTimePicker",
    
12.             bindingPath: "date", // 绑定路径，按照此路径设置并获取此组件值
    
13.             firstDay: 3, // DateTimePicker的所有选项都可以在这里设置，这里只是示例（第一天显示周三）
    
14.         }, {
    
15.             type: "TextBlock",
    
16.             text: "选择单元格区域",
    
17.             margin: "5px -4px"
    
18.         }, {
    
19.             type: "RangeSelect",
    
20.             title: "Choose The Position To Set",
    
21.             absoluteReference: true,
    
22.             needSheetName: false,
    
23.             margin: "5px -5px",
    
24.             bindingPath: 'range'
    
25.         }]
    
26.     }]
    
27. };

复制代码

3、注册模板

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

复制代码

4、定义命令

其中：

commandName：命令名称

iconClass：图标

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

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

复制代码

5、注册命令

1. var config = GC.Spread.Sheets.Designer.DefaultConfig;
   
2. config.commandMap = {
   
3.     cmdDateTimeDialog: dateTimeDialog
   
4. }

复制代码

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

1. var command = {
   
2.     text: "日期选择器",
   
3.     id: "time",
   
4.     buttonGroups: [{
   
5.         label: "日期",
   
6.         commandGroup: {
   
7.             direction: "horizontal",
   
8.             commands: ["cmdDateTimeDialog"]
   
9.         }
   
10.     }]
    
11. };
    
12. config.ribbon.unshift(command);

复制代码

7、初始化designer

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

复制代码

看下实现效果~

（如动图）

完整代码见附件demo。