添加自定义组件

你可以将自定义组件添加到设计器中。例如，以下示例将“日期选择器”组件添加到SpreadJS Designer组件中。

• 在项目中定义自定义组件类。

var DatePicker = defineCustomComponent();

// 构建组件类结构
function defineCustomComponent() {
    function DatePicker() {
        GC.Spread.Sheets.Designer.AtomicComponentBase.call(this, ...arguments)
    };
    DatePicker.prototype = new GC.Spread.Sheets.Designer.AtomicComponentBase();
   
    // 此函数用于定义组件的innerHTML
    DatePicker.prototype.getTemplate = function () {
        return `
           <div class="input-append date" style="margin-top: 35px;">
             <input size="20" class ='form_date' type="text">
           </div>
           `;
    }
   
    // 现在主机元素已经附加到DOM中，您可以向其中添加事件侦听器
    DatePicker.prototype.onMounted = function (host) {
        $(".form_date", host).datepicker();
        // 当日期选择器更改时，引发值更改事件
        $(".form_date", host).change((e) => {
            this.raiseValueChanged()
        })
    }
   
    DatePicker.prototype.onValueChanged = function (prevValue, nextValue, host) {
        $(".form_date", host).datepicker('setDate', (nextValue && nextValue.toLocaleString) ? nextValue.toLocaleString('en-us', { year: 'numeric', month: 'numeric', day: 'numeric' }) : "");
    }
   
    // 此函数将在raiseValueChanged()之后调用
    DatePicker.prototype.updateValue = function (host) {
        var value = $(".form_date", host).datepicker('getDate')
        if (value) {
            return new Date(value);
        }
        return null;
    }
   
    // 删除日期选择器并解除更改事件的绑定
    DatePicker.prototype.onDestroy = function (host) {
        $(".form_date", host).datepicker("destroy");
        $(".form_date", host).unbind("change");
    }
    return DatePicker;
}

• 使用Designer.RegisterComponent方法向Designer注册自定义组件

GC.Spread.Sheets.Designer.Designer.RegisterComponent("DatePicker", DatePicker);

• 在项目中定义自定义构件命令。

var date = initCommand();

// 执行命令
function initCommand() {
    return {
        title: "Set Date",
        text: "Set Date",
        commandName: "date",
        type: 'DatePicker',
        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;
        }
    };
}

• 在commandMap中设置上述命令，并在designer配置中添加自定义组件。

var configDesigner = initConfig(date);

// 自定义设计器配置
function initConfig(date) {
    var config = GC.Spread.Sheets.Designer.DefaultConfig;
    // 在commandMap中设置命令
    config.commandMap = {
        cmdDatePicker: date
    }
    // 在配置中添加自定义组件按钮
    var command = {
        text: "DATE",
        id: "date",
        buttonGroups: [
            {
                label: "DATE",
                commandGroup: {
                    direction: "horizontal",
                    commands: ["cmdDatePicker"]
                }
            }
        ]
    };
    config.ribbon.unshift(command);
    return config;
}

• 通过传递可自定义配置的相关配置参数来初始化设计器实例。

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

将生成以下输出：