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

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

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

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

准备工作：

组件版编辑器： V14.2.0

日期选择器组件： DateTimePicker

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

1、构建组件类结构

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

复制代码

2、实现组件

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

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

复制代码

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

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

复制代码

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

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

复制代码

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

1. DateTimePicker.prototype.updateValue = function(host, options) {
   
2.     var value = $(".form_datetime", host).datepicker('getDate')
   
3.     if (value) {
   
4.         return new Date(value);
   
5.     }
   
6.     return null;
   
7. }

复制代码

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

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

复制代码

4、定义ribbon命令

1. var dateTime = {
   
2.     title: "set time",
   
3.     text: "设置时间",
   
4.     commandName: "dateTime",
   
5.     type: 'DateTimePicker',
   
6.     execute: (designer, propertyName, value) => {
   
7.         let sheet = designer.getWorkbook().getActiveSheet();
   
8.         if (sheet) {
   
9.             var row = sheet.getActiveRowIndex();
   
10.             var col = sheet.getActiveColumnIndex();
    
11.             sheet.setValue(row, col, value);
    
12.         }
    
13.     },
    
14.     getState: (designer) => {
    
15.         var spread = designer.getWorkbook();
    
16.         var sheet = spread.getActiveSheet();
    
17.         var row = sheet.getActiveRowIndex();
    
18.         var col = sheet.getActiveColumnIndex();
    
19.         var value = sheet.getValue(row, col);
    
20.         return value;
    
21.     }
    
22. }
    

复制代码

5、注册命令

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

复制代码

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

1. var command = {
   
2.     text: "日期选择器",
   
3.     id: "time",
   
4.     buttonGroups: [{
   
5.         label: "日期",
   
6.         commandGroup: {
   
7.             direction: "horizontal",
   
8.             commands: ["cmdDateTimePicker"]
   
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。

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