添加新对话框

你可以在 Designer 组件中添加一个新对话框并映射命令以打开和关闭该对话框。

打开对话框

按照以下步骤添加并打开一个在上下文菜单组件中选择“插入签名”选项后显示的“签名对话框”。

访问默认配置

// 配置工作簿和工作表
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var activeSheet = spread.getActiveSheet();

// 访问默认配置
var config = GC.Spread.Sheets.Designer.DefaultConfig;

在 contextMenu 标签中添加“插入签名”选项，并将其设置到项目中的 commandMap 中。

// 在配置上下文菜单中添加上下文菜单项
if (config && config.contextMenu) {
    config.contextMenu.unshift("insertSignatureMenu");
}

// 为新的上下文菜单项创建命令
config.commandMap = {
    "insertSignatureMenu": {
        text: "插入签名",
        commandName: "insertSignatureMenu",
        visibleContext: "ClickRowHeader",

        // 执行 InsertSignature，以下为简单的演示代码片段
        execute: () => {
            // 添加在步骤4中注册的对话框模板名称。
            GC.Spread.Sheets.Designer.showDialog("signature");
        }   
    }
}

通过传递 config 参数来初始化设计器实例，以实现可定制的配置。

// 初始化设计器实例
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), config, spread);

在项目中创建并注册 insertSignature 对话框模板。上下文菜单中的“插入签名”选项将打开“签名”对话框。

let insertSignature = {
    templateName: "insertSignature",
    title: "签名对话框",
    content: [
        {
            type: "FlexContainer",
            children: [
                {
                    type: "TextBlock",
                    margin: "5px -4px",
                    text: "插入范围"
                },
                {
                    type: "RangeSelect",
                    title: "选择范围",
                    absoluteReference: true,
                    needSheetName: false,
                    margin: "5px -5px"
                }
            ]
        },
    ]
}

// 使用 registerTemplate 注册对话框模板实例
GC.Spread.Sheets.Designer.registerTemplate("signature", insertSignature);

关闭对话框

你可以通过使用 Designer.closeDialog 方法以编程方式关闭对话框。此方法接受已注册的模板名称以及是否在关闭对话框后提交对话框值。

在上面的步骤之后，可以进行以下修改以自动关闭“签名对话框”。

在步骤2中修改代码以在现有 commandMap 中添加 closeDialog 方法。

config.commandMap = {
    "insertSignatureMenu": {
        text: "插入签名",
        commandName: "insertSignatureMenu",
        visibleContext: "ClickRowHeader",            
        // 执行 InsertSignature，以下为简单的演示代码片段
        execute: () => {

            // {现有代码}

            // 添加关闭对话框的执行代码
            var showTips = document.querySelector(".show-tips");
            var i = 4;

            var showTipsInterval = setInterval(() => {
                showTips.innerText = "你必须在 " + i + " 秒内输入有效值！";
                i--;
                if (i === -1) {
                    clearInterval(showTipsInterval);
                    GC.Spread.Sheets.Designer.closeDialog("signature", false); // 时间到则关闭对话框
                }
            }, 1000);
        }   
    }
}

在步骤4中修改代码以在对话框模板中添加新的文本块。

let insertSignature = {
    templateName: "insertSignature",
    title: "签名对话框",
    content: [
        // {现有代码}

        // 在对话框模板中添加新的文本块
        {
            type: "TextBlock",
            text: "你必须在 5 秒内输入有效值！",
            className: "show-tips"
        },
    ]
}

控制对话框位置

你可以通过在 setData 方法中设置 dialogOpeningPosition 参数为 screenCenter 或 designerCenter 来调整对话框的打开位置。

designerCenter 是默认选项，它将设计器尽可能调整到视觉区域的中心。然而，从第一个对话框打开的第二个对话框将出现在第一个对话框的中心。
screenCenter 选项直接将对话框调整到当前可见区域，而无需滚动页面。此时浏览器窗口的大小必须大于当前打开的对话框的大小。

type=warning
注意：当设计器的大小不支持打开所有对话框时，对话框会调整其位置。然而，如果空间足够，对话框将打开在功能区下方，仅覆盖工作表部分。

使用 setData 方法的 dialogOpeningPosition 参数设置设计器的对话框位置，如下所示。

designer.setData("dialogOpeningPosition", "screenCenter");

生成的输出如下：

controldialogposition.3b7551