[]
产品首页 在线 Demo 产品文档 API 参考 技术社区
立即试用
(Showing Draft Content)

GC.Spread.Sheets.Designer

命名空间: Designer

Spread.Sheets.Designer

Table of contents

枚举

类

接口

类型别名

变量

函数

Type aliases

CommandMap

Ƭ CommandMap: { [key in string]: ICommand }

CommandType

Ƭ CommandType: "button" | "dropdown" | "separator" | "checkbox" | "comboBox" | "text" | "spinner" | "list-preview" | "colorPicker" | "groupHeader" | "chartFormat" | "tableFooter" | "SparklineColorPicker" | "textBox" | "listContent" | string

IComponentRenderType

Ƭ IComponentRenderType: INumberEditorOption | IRadioOption | IFileSelectorOption | IResetTextEditorOption | ISliderOption | ITextBlockOption | ITextEditorOption | IColumnOption | IColumnSetOption | IFlexContainerOption | ILabelLineOption | IButtonOption | ILabelContainerOption | ICheckBoxOption | IContainerOption | IListOption | IMultiSelectListOption | ITabControlOption | IRangeSelectOption | IColorPickerOption | IListComboEditorOption | IListEditorOption | IFontPickerOption | IFontDialogEditorOption | IColorLineStyleComboEditorOption | IColorIconComboEditorOption | IColorComboEditorItemsOption | IColorPreviewOption | ICollapsePanelOption | ICheckBoxGroupOption | IColorComboEditorOption | IFillDialogOption | IFillEffectOption | IPatternTypeComboEditorOption | IPatternTypePickerOption | IPatternTypePreviewOption | ISheetListComboEditorOption | IMultiColumnPickerEditorOption | IFunctionLetEditorOption | IFunctionLambdaEditorOption | IFontEffectsAndUnderlineOption | IFontEffectOption | IFontPreviewOption | IGaugeColorComboEditorItemsOption | IBoxSizePickerOption | ITabSelectorOption | IGradientColorStopsEditorOption | IButtonComboEditorOption | IImageSparklineEditorOption | ICalcFieldDialogEditorOption | IFieldListTreeOption | ISpreadContainerOption | ISortColorComboEditorOption | ISortColorEditorOption | IMultiColumnListOption | IMarginEditorOption | ISpreadTemplateOption | IDataManagerController | IDataManagerTableListController | IDataManagerTableColumnController | IDataManagerTableList | IDataManagerColumnsList | ITableSheetPanelEditor | IEditableSelectOption | ITableOption | ITableSheetPanelTitle

IconType

Ƭ IconType: "foreColor" | "backColor" | "sparklineColor"

RuleType

Ƭ RuleType: "Defaults" | "Float" | "Currency" | "Percent"

TemplateMap

Ƭ TemplateMap: { [key in string]: IDialogTemplate }

Variables

DefaultConfig

• DefaultConfig: IDesignerConfig

设计器的默认配置

LicenseKey

• LicenseKey: string

设计器授权

ToolBarModeConfig

• ToolBarModeConfig: IDesignerConfig

设计器toolbar模式的配置

Functions

closeDialog

▸ closeDialog(templateName, submitValue): void

关闭打开的对话框

代码示例

// 有时用户希望在没有UI的情况下直接关闭对话框，他们可以使用closeDialog并在关闭对话框后决定是否提交值
  var inputCommand = {
      title: "Input",
      text: "Input",
      iconClass: "ribbon-button-input-text",
      bigButton: true,
      commandName: "inputText",
      execute: (context, propertyName) => {
          var dialogOption = {
              text: "",
          };
          GC.Spread.Sheets.Designer.showDialog("setText", dialogOption, (result) => {
              if (!result) {
                  return;
              }
              var text = result.text;
              var spread = context.getWorkbook();
              var sheet = spread.getActiveSheet();
              var column = sheet.getActiveColumnIndex();
              var row = sheet.getActiveRowIndex();
              sheet.setValue(row, column, text);
              clearInterval(showTipsInterval);
          }, (error) => {
              console.error(error);
          }, checkResult);
          var showTips = document.querySelector(".show-tips");
          var i = 4;
          var showTipsInterval = setInterval(() => {
              showTips.innerText = "You must input valid value within " + i + " seconds!";
              i--;
              if (i === -1) {
                  clearInterval(showTipsInterval);
                  GC.Spread.Sheets.Designer.closeDialog("setText", false);
              }
          }, 1000);
      }
  };
  var config = GC.Spread.Sheets.Designer.DefaultConfig;
  config.commandMap = {
      input: inputCommand,
  };
  var inputCommandGroup = {
      label: "input",
      thumbnailClass: "input",
      commandGroup: {
          children: [
              {
                  direction: "vertical",
                  commands: [
                      "input"
                  ]
              }
          ]
      }
  };
  if (config && config.ribbon) {
  config.ribbon[0].buttonGroups.push(inputCommandGroup);
  }
  var setTextTemplate = {
      title: "demo",
      content: [
          {
              type: "ColumnSet",
              children: [
                  {
                      type: "Column",
                      children: [
                          {
                              type: "TextBlock",
                              text: "Text:",
                          }
                      ]
                  },
                  {
                      type: "Column",
                      children: [
                          {
                              type: "TextEditor",
                              margin: "0 0 0 10px",
                              bindingPath: "text"
                          }
                      ]
                  }
              ]
          },
          {
              type: "TextBlock",
              text: "You must input valid value within 5 seconds!",
              className: "show-tips"
          },
      ]
  };
  GC.Spread.Sheets.Designer.registerTemplate("setText", setTextTemplate);
  function checkResult(value) {
      if (value.text === "") {
          GC.Spread.Sheets.Designer.showMessageBox("Please do not input a null value.", "Warning", GC.Spread.Sheets.Designer.MessageBoxIcon.warning);
          return false;
      } else {
          返回true
      }
  }
  var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);

参数

属性名 类型 说明
templateName string 打开模板名称，模板必须在设计器中注册
submitValue boolean 是否在关闭对话框后提交打开模板时的值

返回值

void

findControl

▸ findControl(host): Designer | undefined

获取现有HTMLElement的设计器实例

代码示例

// 本示例将获得现有HTMLElement的设计器实例
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
var designer = GC.Spread.Sheets.Designer.findControl(document.getElementById("hostDiv"));
var designer = GC.Spread.Sheets.Designer.findControl("hostDiv");

参数

属性名 类型 说明
host string | HTMLElement 目标HTMLElement

返回值

Designer | undefined

现有HTMLElement的设计器实例

getCommand

▸ getCommand(commandName?): ICommand | undefined

此方法将仅使用命令名获取commandMap中的命令，或获取commandMap中注册的所有命令

代码示例

// 用户想自定义字体
var config = GC.Spread.Sheets.Designer.DefaultConfig;
var customCommand = GC.Spread.Sheets.Designer.getCommand("fontFamily");
customCommand.dropdownList.push({
    text: "customFont",
    value: "customFont"
});
if (config && config.ribbon) {
config.ribbon[0].buttonGroups[2].commandGroup.children[0].commands[0] = 'customFont';
}
config.commandMap = {
     customFont: customCommand
}
designer.setConfig(config);

参数

属性名 类型 说明
commandName? string 命令名，唯一标识一个命令，如果commandName为空，将返回所有已注册的命令

返回值

ICommand | undefined

  • 按命令名找到的命令

getResources

▸ getResources(): Object

获取设计器全局资源对象

代码示例

// 用户想要更改功能区或模板中的某些资源，他们需要获取原始设计器资源并对其进行修改，然后在初始化设计器之前将其设置回原位
var resources = GC.Spread.Sheets.Designer.getResources();
resources.ok = "OK!";
resources.formatDialog.title = "Format Dialog!"
resources.ribbon.home.home = "HOME!";
resources.ribbon.home.paste = "Paste!";
GC.Spread.Sheets.Designer.setResources(resources);
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));

返回值

Object

  • 设计器资源

getTemplate

▸ getTemplate(templateName): IDialogTemplate | null

可以通过模板名称找到已注册模板的副本模板应该注册到templateMap

代码示例

// 用户想要在设计器中将"插入格式化单元格"对话框的标题更改为"自定义"
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
var formatCellsTemplate = GC.Spread.Sheets.Designer.getTemplate("formatDialogTemplate").
formatCellsTemplate.title = "Custom";
//相同的模板名称会冲掉原来的模板
GC.Spread.Sheets.Designer.registerTemplate("formatDialogTemplate", formatCellsTemplate);

参数

属性名 类型 说明
templateName string 模板应该注册到templateMap可以通过模板名称找到已注册模板的副本

返回值

IDialogTemplate | null

  • 根据模板名称找到模板

registerTemplate

▸ registerTemplate(templateName, template): void

向templateMap注册一个模板，这样设计器就可以找到该模板

代码示例

//例如，下面的代码将打开templateExample，该选项将在模板中使用，单击ok后，将设置文本和设置水平对齐
var inputCommand = {
    title: "Input",
    text: "Input",
    iconClass: "ribbon-button-input-text",
    bigButton: true,
    commandName: "inputText",
    execute: (context, propertyName) => {
        var dialogOption = {
            text: "",
            isCenter: false,
        };
        GC.Spread.Sheets.Designer.showDialog("setText", dialogOption, (result) => {
            if (!result) {
                 return;
             }
            var text = result.text;
            var isCenter = result.isCenter;
            var spread = context.getWorkbook();
            var sheet = spread.getActiveSheet();
            var column = sheet.getActiveColumnIndex();
            var row = sheet.getActiveRowIndex();
            sheet.setValue(row, column, text);
            if (isCenter) {
                var style = new GC.Spread.Sheets.Style();
                style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
                sheet.setStyle(row, column, style);
            }
        }, (error) => {
            console.error(error);
        }, checkResult);
    }
};
var config = GC.Spread.Sheets.Designer.DefaultConfig;
config.commandMap = {
    input: inputCommand,
};
var inputCommandGroup = {
    label: "input",
    thumbnailClass: "input",
    commandGroup: {
        children: [
            {
                direction: "vertical",
                commands: [
                    "input"
                ]
            }
        ]
    }
};
if (config && config.ribbon) {
config.ribbon[0].buttonGroups.push(inputCommandGroup);
}
var setTextTemplate = {
    title: "demo",
    content: [
        {
            type: "ColumnSet",
            children: [
                {
                    type: "Column",
                    children: [
                        {
                            type: "TextBlock",
                            text: "Text:",
                        }
                    ]
                },
                {
                    type: "Column",
                    children: [
                        {
                            type: "TextEditor",
                            margin: "0 0 0 10px",
                            bindingPath: "text"
                        }
                     ]
                }
            ]
        },
        {
            type: "CheckBox",
            bindingPath: "isCenter",
            text: "Center",
         },
    ]
};
GC.Spread.Sheets.Designer.registerTemplate("setText", setTextTemplate);
function checkResult(value) {
    if (value.text === "") {
        GC.Spread.Sheets.Designer.showMessageBox("Please do not input a null value.", "Warning", GC.Spread.Sheets.Designer.MessageBoxIcon.warning);
        return false;
    } else {
        return true
    }
}
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);

参数

属性名 类型 说明
templateName string 模板名称，唯一标识一个模板
template IDialogTemplate 模板实例

返回值

void

setResources

▸ setResources(resources): void

设置设计器全局资源对象

代码示例

// 用户想要更改功能区或模板中的某些资源，他们需要获取原始设计器资源并对其进行修改，然后在初始化设计器之前将其设置回原位
var resources = GC.Spread.Sheets.Designer.getResources();
resources.ok = "OK!";
resources.formatDialog.title = "Format Dialog!"
resources.ribbon.home.home = "HOME!";
resources.ribbon.home.paste = "Paste!";
GC.Spread.Sheets.Designer.setResources(resources);
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));

参数

属性名 类型
resources Object

返回值

void

showDialog

▸ showDialog(templateName, bindingData, successCallback, errCallback?, validCallback?, popupElement?): void

此函数将显示一个带有选项的对话框，该选项将用于根据模板名称获得的对话框模板中

代码示例

//例如，下面的代码将打开templateExample，该选项将在模板中使用，单击ok后，将设置文本和设置水平对齐
var inputCommand = {
    title: "Input",
    text: "Input",
    iconClass: "ribbon-button-input-text",
    bigButton: true,
    commandName: "inputText",
    execute: (context, propertyName) => {
        var dialogOption = {
            text: "",
            isCenter: false,
        };
        GC.Spread.Sheets.Designer.showDialog("setText", dialogOption, (result) => {
            if (!result) {
                 return;
             }
            var text = result.text;
            var isCenter = result.isCenter;
            var spread = context.getWorkbook();
            var sheet = spread.getActiveSheet();
            var column = sheet.getActiveColumnIndex();
            var row = sheet.getActiveRowIndex();
            sheet.setValue(row, column, text);
            if (isCenter) {
                var style = new GC.Spread.Sheets.Style();
                style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
                sheet.setStyle(row, column, style);
            }
        }, (error) => {
            console.error(error);
        }, checkResult);
    }
};
var config = GC.Spread.Sheets.Designer.DefaultConfig;
config.commandMap = {
    input: inputCommand,
};
var inputCommandGroup = {
    label: "input",
    thumbnailClass: "input",
    commandGroup: {
        children: [
            {
                direction: "vertical",
                commands: [
                    "input"
                ]
            }
        ]
    }
};
if (config && config.ribbon) {
config.ribbon[0].buttonGroups.push(inputCommandGroup);
}
var setTextTemplate = {
    title: "demo",
    content: [
        {
            type: "ColumnSet",
            children: [
                {
                    type: "Column",
                    children: [
                        {
                            type: "TextBlock",
                            text: "Text:",
                        }
                    ]
                },
                {
                    type: "Column",
                    children: [
                        {
                            type: "TextEditor",
                            margin: "0 0 0 10px",
                            bindingPath: "text"
                        }
                     ]
                }
            ]
        },
        {
            type: "CheckBox",
            bindingPath: "isCenter",
            text: "Center",
         },
    ]
};
GC.Spread.Sheets.Designer.registerTemplate("setText", setTextTemplate);
function checkResult(value) {
    if (value.text === "") {
        GC.Spread.Sheets.Designer.showMessageBox("Please do not input a null value.", "Warning", GC.Spread.Sheets.Designer.MessageBoxIcon.warning);
        return false;
    } else {
        return true
    }
}
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);

参数

属性名 类型 说明
templateName string 模板的名称
bindingData Object 对话框bindingData
successCallback Function 对话框关闭后的回调如果选择OK按钮，则返回对话框数据，如果选择cancel或'X'，则返回null
errCallback? Function 对话框在发生异常的回调
validCallback? Function 对话框回调函数，将在单击确定并关闭对话框后但在返回结果之前更改结果或执行某些操作，然后返回操作结果
popupElement? HTMLElement 模板所依赖的对话框目标HTMLElement

返回值

void

showMessageBox

▸ showMessageBox(text, title, icon, successCallback?, errCallback?, buttons?): void

这个函数将显示一个带有输入选项的消息框

代码示例

//For example, the following code will show a messageBox with title "this is title", text "this is error text" and icon yellow triangle exclamation mark.
var showCommand = {
    title: "show",
    text: "show",
    iconClass: "ribbon-button-show",
    bigButton: true,
    commandName: "show",
    execute: (context, propertyName) => {
        GC.Spread.Sheets.Designer.showMessageBox("this is title", "this is error text", GC.Spread.Sheets.Designer.MessageBoxIcon.warning);  // 显示消息框
    }
};
var config = GC.Spread.Sheets.Designer.DefaultConfig;
config.commandMap = {
    showMessage: showCommand
};
var showCommandGroup = {
    label: "Show",
    thumbnailClass: "Show",
    commandGroup: {
        children: [
            {
                direction: "vertical",
                commands: [
                    "showMessage"
                ]
            }
        ]
    }
};
if (config && config.ribbon) {
config.ribbon[0].buttonGroups.push(showCommandGroup);
}
var d = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);

参数

属性名 类型 说明
text string 消息框的错误文本
title string 消息框的标题
icon MessageBoxIcon 消息框的图标
successCallback? Function After dialog is closed, this method executes. The parameter "data" indicates which button is clicked, its type is GC.Spread.Sheets.Designer.MessageBoxResult, 1 is "ok", 2 is "yes", 3 is "no" and 4 is "cancel".
errCallback? Function 对话框在发生异常的回调
buttons? MessageBoxButtons 消息框的按钮

返回值

void