定制

SpreadJS设计器组件允许您执行各种自定义操作，例如：

• 为常用命令添加新的功能区选项卡

• 在选项卡中添加新按钮以保存数据

• 添加新的上下文菜单项以锁定单元格

• 为自定义操作添加新的对话框

设计器组件术语

要自定义设计器组件，了解其布局和术语非常重要。下图为每个设计器组件指定的术语进行了标注：

下图为功能区组件指定的术语进行了标注：

访问默认配置以自定义设计器组件

SpreadJS设计器组件提供了DefaultConfig字段，该字段以命令树结构包含设计器组件的默认配置。使用它，您可以访问和自定义设计器组件配置：

var config = GC.Spread.Sheets.Designer.DefaultConfig;

您可以在配置结构中进行所需的自定义，并在Web应用程序中引用它。然后，在初始化设计器组件时将此可自定义配置作为参数传递。这将在以下部分中进行解释。

使用可自定义配置初始化设计器组件

在自定义默认配置后，将可自定义配置作为参数传递给GC.Spread.Sheets.Designer.Designer类。它最多可以接受3个参数，定义如下：

// 使用可自定义配置和spread组件初始化设计器
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), config, spread);

这里：

• designerHost - HTMLElement，表示设计器的宿主元素

• config - Object，代表布局的可自定义配置JSON

• spread - GC.Spread.Sheets.Workbook实例，表示连接到设计器的SpreadJS实例

  config和spread参数是可选的。如果未提供，设计器将使用默认的设计器组件并生成一个新的电子表格。

可能的自定义操作

以下几点说明了设计器组件中可能进行的自定义操作的范围：

• 设计器组件的第一级，包括功能区、上下文菜单、文件菜单和侧边栏，可以删除，但不能修改或添加。

• 第二级及相应的子级别，包括按钮、选项卡、上下文菜单项等，可以自定义。

• 每个元素的响应或交互可以通过设置commandMap来注册命令进行自定义。

示例

最简单的设计器组件自定义操作之一是控制功能区组件的状态。要以折叠功能区的状态启动设计器组件，可以使用setData方法将isRibbonCollapse状态设置为true。

var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));
// 将功能区状态设置为折叠
designer.setData('isRibbonCollapse',true);

要执行各种其他自定义操作，请参考以下主题：

• 添加选项卡

• 向选项卡添加元素

• 设定活动选项卡

• 启用或禁用功能区元素

• 自定义页面布局和主题

• 添加上下文菜单项

• 添加新对话框

• 绑定文件导入事件

• 自定义状态栏

• 添加自定义组件

• 自定义设计器本地化

• 自定义文件菜单

• 自定义格式文化对话框

• 自定义文件保存对话框