[]
Ƭ CommandMap: { [key in string]: ICommand }
Ƭ CommandType: "button" | "dropdown" | "separator" | "checkbox" | "comboBox" | "text" | "spinner" | "list-preview" | "colorPicker" | "groupHeader" | "chartFormat" | "tableFooter" | "SparklineColorPicker" | "textBox" | "listContent" | string
Ƭ 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: "foreColor" | "backColor" | "sparklineColor"
Ƭ RuleType: "Defaults" | "Float" | "Currency" | "Percent"
Ƭ TemplateMap: { [key in string]: IDialogTemplate }
• DefaultConfig: IDesignerConfig
表示设计器的默认配置
• LicenseKey: string
表示评估版本和生产版本的许可证密钥
• ToolBarModeConfig: IDesignerConfig
表示设计器的工具栏模式配置
▸ closeDialog(templateName, submitValue): void
关闭一个打开的对话框。
example
// 有时用户希望直接关闭对话框而不通过UI操作，他们可以使用closeDialog并决定关闭对话框后是否提交值。
var inputCommand = {
title: "输入",
text: "输入",
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 = "您必须在" + i + "秒内输入有效值！";
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: "输入",
thumbnailClass: "input",
commandGroup: {
children: [
{
direction: "vertical",
commands: [
"input"
]
}
]
}
};
if (config && config.ribbon) {
config.ribbon[0].buttonGroups.push(inputCommandGroup);
}
var setTextTemplate = {
title: "示例",
content: [
{
type: "ColumnSet",
children: [
{
type: "Column",
children: [
{
type: "TextBlock",
text: "文本:",
}
]
},
{
type: "Column",
children: [
{
type: "TextEditor",
margin: "0 0 0 10px",
bindingPath: "text"
}
]
}
]
},
{
type: "TextBlock",
text: "您必须在5秒内输入有效值！",
className: "show-tips"
},
]
};
GC.Spread.Sheets.Designer.registerTemplate("setText", setTextTemplate);
function checkResult(value) {
if (value.text === "") {
GC.Spread.Sheets.Designer.showMessageBox("请不要输入空值。", "警告", 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);
| Name | Type | Description |
|---|---|---|
templateName |
string |
打开的模板名称，该模板必须已在设计器中注册。 |
submitValue |
boolean |
关闭对话框后是否提交打开的模板值。 |
void
▸ findControl(host): Designer | undefined
获取现有HTMLElement的设计器实例
example
// 此示例将获取现有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");
| Name | Type | Description |
|---|---|---|
host |
string | HTMLElement |
目标HTMLElement |
Designer | undefined
现有HTMLElement的设计器实例
▸ getCommand(commandName?): ICommand | undefined
此函数仅使用命令名称从commandMap中获取命令，或获取commandMap中注册的所有命令。
example
// 用户想要自定义字体族。
var config = GC.Spread.Sheets.Designer.DefaultConfig;
var customCommand = GC.Spread.Sheets.Designer.getCommand("fontFamily");
customCommand.dropdownList.push({
text: "自定义字体",
value: "customFont"
});
if (config && config.ribbon) {
config.ribbon[0].buttonGroups[2].commandGroup.children[0].commands[0] = 'customFont';
}
config.commandMap = {
customFont: customCommand
}
designer.setConfig(config);
| Name | Type | Description |
|---|---|---|
commandName? |
string |
命令名称，唯一标识一个命令，如果commandName为空，将返回所有注册的命令。 |
ICommand | undefined
▸ getResources(): Object
获取全局设计器工作资源对象。
example
// 用户想要更改功能区或模板中的某些资源，他们需要获取原始设计器资源并进行修改，然后在初始化设计器之前将其设置回去。
var resources = GC.Spread.Sheets.Designer.getResources();
resources.ok = "确定!";
resources.formatDialog.title = "格式对话框!"
resources.ribbon.home.home = "主页!";
resources.ribbon.home.paste = "粘贴!";
GC.Spread.Sheets.Designer.setResources(resources);
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
Object
▸ getTemplate(templateName): IDialogTemplate | null
可以通过模板名称查找已注册模板的副本。该模板必须已注册到templateMap中。
example
// 用户希望将设计器中插入格式单元格对话框的标题修改为'自定义'
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
var formatCellsTemplate = GC.Spread.Sheets.Designer.getTemplate("formatDialogTemplate");
formatCellsTemplate.title = "自定义";
// 使用相同模板名称注册会覆盖原有模板
GC.Spread.Sheets.Designer.registerTemplate("formatDialogTemplate", formatCellsTemplate);
| Name | Type | Description |
|---|---|---|
templateName |
string |
需在templateMap中已注册的模板名称，可通过此名称查找对应模板副本。 |
IDialogTemplate | null
▸ registerTemplate(templateName, template): void
将模板注册到templateMap，以便设计器能够找到该模板。
example
// 例如，以下代码将打开templateExample对话框，该选项将在模板中使用，点击确定后将设置文本并设置水平对齐方式。
var inputCommand = {
title: "输入",
text: "输入",
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: "输入",
thumbnailClass: "input",
commandGroup: {
children: [
{
direction: "vertical",
commands: [
"input"
]
}
]
}
};
if (config && config.ribbon) {
config.ribbon[0].buttonGroups.push(inputCommandGroup);
}
var setTextTemplate = {
title: "演示",
content: [
{
type: "ColumnSet",
children: [
{
type: "Column",
children: [
{
type: "TextBlock",
text: "文本:",
}
]
},
{
type: "Column",
children: [
{
type: "TextEditor",
margin: "0 0 0 10px",
bindingPath: "text"
}
]
}
]
},
{
type: "CheckBox",
bindingPath: "isCenter",
text: "居中",
},
]
};
GC.Spread.Sheets.Designer.registerTemplate("setText", setTextTemplate);
function checkResult(value) {
if (value.text === "") {
GC.Spread.Sheets.Designer.showMessageBox("请不要输入空值。", "警告", 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);
| Name | Type | Description |
|---|---|---|
templateName |
string |
模板名称，用于唯一标识一个模板。 |
template |
IDialogTemplate |
模板实例。 |
void
▸ setResources(resources): void
设置全局设计器工作资源对象。
example
// 用户想要修改ribbon或模板中的一些资源，他们需要获取原始设计器资源并修改它，然后在初始化设计器之前将其设置回去。
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"));
| Name | Type |
|---|---|
resources |
Object |
void
▸ showDialog(templateName, bindingData, successCallback, errCallback?, validCallback?, popupElement?): void
此函数将显示一个带有选项的对话框，该选项将用于通过模板名称获取的对话框模板中。
example
//例如，以下代码将打开templateExample，选项将用于模板中，点击确定后，将设置文本并设置水平对齐。
var inputCommand = {
title: "输入",
text: "输入",
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: "输入",
thumbnailClass: "input",
commandGroup: {
children: [
{
direction: "vertical",
commands: [
"input"
]
}
]
}
};
if (config && config.ribbon) {
config.ribbon[0].buttonGroups.push(inputCommandGroup);
}
var setTextTemplate = {
title: "示例",
content: [
{
type: "ColumnSet",
children: [
{
type: "Column",
children: [
{
type: "TextBlock",
text: "文本:",
}
]
},
{
type: "Column",
children: [
{
type: "TextEditor",
margin: "0 0 0 10px",
bindingPath: "text"
}
]
}
]
},
{
type: "CheckBox",
bindingPath: "isCenter",
text: "居中",
},
]
};
GC.Spread.Sheets.Designer.registerTemplate("setText", setTextTemplate);
function checkResult(value) {
if (value.text === "") {
GC.Spread.Sheets.Designer.showMessageBox("请不要输入空值。", "警告", 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);
| Name | Type | Description |
|---|---|---|
templateName |
string |
模板名称。 |
bindingData |
Object |
对话框绑定数据。 |
successCallback |
Function |
对话框关闭后执行此方法。如果选择了确定按钮，则返回对话框数据；如果选择了取消或"X"，则返回null。 |
errCallback? |
Function |
发生异常时对话框执行此方法。 |
validCallback? |
Function |
对话框回调函数，将在点击确定并关闭对话框后但在返回结果之前更改结果或执行某些操作，然后返回操作后的结果。 |
popupElement? |
HTMLElement |
模板所依赖的对话框目标HTMLElement。 |
void
▸ showMessageBox(text, title, icon, successCallback?, errCallback?, buttons?): void
此函数将显示一个带有输入选项的消息框。
example
// 例如，以下代码将显示一个标题为"这是标题"、文本为"这是错误文本"且带有黄色三角形感叹号图标的消息框。
var showCommand = {
title: "显示",
text: "显示",
iconClass: "ribbon-button-show",
bigButton: true,
commandName: "show",
execute: (context, propertyName) => {
GC.Spread.Sheets.Designer.showMessageBox("这是标题", "这是错误文本", GC.Spread.Sheets.Designer.MessageBoxIcon.warning); // 显示消息框
}
};
var config = GC.Spread.Sheets.Designer.DefaultConfig;
config.commandMap = {
showMessage: showCommand
};
var showCommandGroup = {
label: "显示",
thumbnailClass: "显示",
commandGroup: {
children: [
{
direction: "垂直",
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);
| Name | Type | Description |
|---|---|---|
text |
string |
消息框显示的错误文本 |
title |
string |
消息框的标题 |
icon |
MessageBoxIcon |
消息框的图标 |
successCallback? |
Function |
对话框关闭后执行的回调函数。参数"data"表示点击的按钮类型，类型为GC.Spread.Sheets.Designer.MessageBoxResult，1表示"确定"，2表示"是"，3表示"否"，4表示"取消"。 |
errCallback? |
Function |
对话框发生异常时执行的回调函数。 |
buttons? |
MessageBoxButtons |
消息框显示的按钮 |
void