类: Designer

Sheets.Designer.Designer

Table of contents

构造方法

• constructor

方法

• activeRibbonTab
• bind
• destroy
• getData
• getWorkbook
• refresh
• setConfig
• setData
• setWorkbook
• unbind
• unbindAll
• RegisterComponent

构造方法

constructor

• new Designer(host, config?, spread?, spreadOptions?)

使用指定的DOM元素、自定义配置和spread组成设计器

代码示例

var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
var customConfig = {
      ribbon: [
          {
              id: "home",
              text: "HOME",
              buttonGroups: [
                {
                  label: "Undo",
                  thumbnailClass: "ribbon-thumbnail-undoRedo",
                  commandGroup: {
                    children: [
                      {
                        direction: "vertical",
                        commands: [
                          "undo",
                          "redo"
                        ]
                      }
                    ]
                  }
                }
              ]
          }
      ],
      contextMenu: [
          "contextMenuCut",
          "contextMenuCopy",
      ],
      fileMenu: "fileMenuButton",
      sidePanels: [
          {
              position: "top",
              allowResize: true,
              command: "formulaBarPanel",
              uiTemplate: "formulaBarTemplate"
          },
      ]
 };
var customDesigner = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv2"), customConfig);

参数

属性名	类型	说明
host	string | HTMLDivElement	设计器的宿主
config?	IDesignerConfig	设计器配置对象
spread?	Object	工作簿实例
spreadOptions?	Object	工作簿初始化选项

方法

activeRibbonTab

▸ activeRibbonTab(ribbonTabId?): string

获取或设置设计师活动的功能区选项卡 ID，功能区选项卡 ID 位于 DefaultConfig 中

代码示例

// This example will set the designer active ribbon tab after designer initializing.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), undefined, spread);
let currentActiveRibbonTab = designer.activeRibbonTab(); // get the active ribbon tab id.
if (currentActiveRibbonTab !== "insert") {
    designer.activeRibbonTab("insert"); // will set the INSERT ribbon tab active.
}

参数

属性名	类型	说明
ribbonTabId?	string	新的活动功能区选项卡 ID

返回值

string

• The designer current active ribbon tab id.

---

bind

▸ bind(type, fn?): void

将事件绑定到设计器

代码示例

//绑定事件示例
designer.bind(GC.Spread.Sheets.Designer.Events.FileLoading, function(type, message){
    if (message.fileType = GC.Spread.Sheets.Designer.FileType.Excel){
        let spreadJsonData = message.data;
        if(spreadJsonData.sheetCount >= 3) {
             message.cancel = true;
        }
    };
});

参数

属性名	类型	说明
type	string	事件类型
fn?	any	事件触发时要执行的函数

返回值

void

---

destroy

▸ destroy(): void

销毁设计器并解除所有事件的绑定

代码示例

// 本示例将在创建新的设计器后销毁原设计器
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
designer.destroy();

返回值

void

---

getData

▸ getData(key): any

获取状态或值时，有两种类型的数据，一种是只在一个组件中使用的本地数据 另一个是全局数据，在整个设计器环境中使用，designer,getData (key)可以通过key获得存储在设计器中的全局数据

代码示例

// 本示例将在一个位置(如ribbon->Home)设置全局数据，并在另一个位置(如ribbon->setting)获取该全局数据，两个位置都有设计器实例
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var config = GC.Spread.Sheets.Designer.DefaultConfig;
var logInCommand = {
	title: "Login",
	text: "Login",
	iconClass: "ribbon-button-login",
	bigButton: true,
	commandName: "login",
	execute: (context, propertyName) => {
		alert('Log in new designer.');
		context.setData("isLogIn", true); // setData()
	 }
};
var getGiftCommand = {
	 title: "Get gift",
	 text: "Get gift",
	 iconClass: "ribbon-button-get-gift",
	 bigButton: 'true',
	 commandName: "getGift",
	 execute: (context, propertyName) => {
		 let isLogIn = context.getData("isLogIn"); // getData()
		 if (isLogIn) {
			 alert("Get gift");
		 }
		 else {
			 alert("Please log in");
		 }
	 }
};
config.commandMap = {
	 login: logInCommand,
	 getGift: getGiftCommand,
};
var logInCommandGroup = {
	 label: "Login",
	 thumbnailClass: "Login",
	 commandGroup: {
		 children: [
			 {
				 direction: "vertical",
				 commands: [
					 "Login"
				 ]
			 }
		 ]
	 }
};
var getGiftCommandGroup = {
	 label: "Gift",
	 thumbnailClass: "Gift",
	 commandGroup: {
		 children: [
			 {
				 direction: "vertical",
				 commands: [
					 "getGift"
				 ]
			 }
		 ]
	  }
 };
 if (config && config.ribbon) {
 config.ribbon[0].buttonGroups.unshift(logInCommandGroup);
 config.ribbon[5].buttonGroups.unshift(getGiftCommandGroup);
 }
 var d = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config, spread);

参数

属性名	类型	说明
key	string	数据名称，唯一标识一个状态数据

返回值

any

• 该数据名称的值或状态可以是对象、字符串或其他类型

---

getWorkbook

▸ getWorkbook(): Object

获取设计器的工作簿

代码示例

// 本示例将获取设计器的工作簿
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
var workbook = designer.getWorkbook();
var sheet = workbook.getActiveSheet();

返回值

Object

设计器的工作簿

---

refresh

▸ refresh(): void

刷新设计器布局和功能区

代码示例

// 本示例将在更改设计器内容HTMLElement的大小后刷新设计器和功能区
var designerContent = document.getElementById("gc-designer-container");
designerContent.style.width =width + "px";
designerContent.style.height = height + "px";
designer.refresh();

返回值

void

---

setConfig

▸ setConfig(config): void

表示使用自定义配置的新设计器

代码示例

// 本示例将为现有设计器设置自定义配置
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
var config = {
      ribbon: [
          {
              id: "home",
              text: "HOME",
              buttonGroups: [
                {
                  label: "Undo",
                  thumbnailClass: "ribbon-thumbnail-undoRedo",
                  commandGroup: {
                    children: [
                      {
                        direction: "vertical",
                        commands: [
                          "undo",
                          "redo"
                        ]
                      }
                    ]
                  }
                }
              ]
          }
      ],
      contextMenu: [
          "contextMenuCut",
          "contextMenuCopy",
      ],
      fileMenu: "fileMenuButton",
      sidePanels: [
          {
              position: "top",
              allowResize: true,
              command: "formulaBarPanel",
              uiTemplate: "formulaBarTemplate"
          },
      ]
 };
designer.setConfig(config);

参数

属性名	类型	说明
config	IDesignerConfig	设计器配置对象

返回值

void

---

setData

▸ setData(key, value): void

设置状态或值时，有两种类型的数据，一种是只在一个组件中使用的本地数据 另一个是全局数据在整个设计环境中使用setData(key, value)可以通过具有设计器实例中的键值设置存储在设计器中的全局数据

代码示例

// 本示例将在一个位置(如ribbon->Home)设置全局数据，并在另一个位置(如ribbon->setting)获取该全局数据，两个位置都有设计器实例
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var config = GC.Spread.Sheets.Designer.DefaultConfig;
var logInCommand = {
	title: "Login",
	text: "Login",
	iconClass: "ribbon-button-login",
	bigButton: true,
	commandName: "login",
	execute: (context, propertyName) => {
		alert('Log in new designer.');
		context.setData("isLogIn", true); // setData()
	 }
};
var getGiftCommand = {
	 title: "Get gift",
	 text: "Get gift",
	 iconClass: "ribbon-button-get-gift",
	 bigButton: 'true',
	 commandName: "getGift",
	 execute: (context, propertyName) => {
		 let isLogIn = context.getData("isLogIn"); // getData()
		 if (isLogIn) {
			 alert("Get gift");
		 }
		 else {
			 alert("Please log in");
		 }
	 }
};
config.commandMap = {
	 login: logInCommand,
	 getGift: getGiftCommand,
};
var logInCommandGroup = {
	 label: "Login",
	 thumbnailClass: "Login",
	 commandGroup: {
		 children: [
			 {
				 direction: "vertical",
				 commands: [
					 "Login"
				 ]
			 }
		 ]
	 }
};
var getGiftCommandGroup = {
	 label: "Gift",
	 thumbnailClass: "Gift",
	 commandGroup: {
		 children: [
			 {
				 direction: "vertical",
				 commands: [
					 "getGift"
				 ]
			 }
		 ]
	  }
 };
 if (config && config.ribbon) {
 config.ribbon[0].buttonGroups.unshift(logInCommandGroup);
 config.ribbon[5].buttonGroups.unshift(getGiftCommandGroup);
 }
 var d = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config, spread);

参数

属性名	类型	说明
key	string	数据名称，唯一标识一个状态数据，如果您多次使用不同的值设置相同的键，将只存储最新的值
value	any	该数据名称的值或状态可以是对象、字符串或其他类型

返回值

void

---

setWorkbook

▸ setWorkbook(spread): void

使用现有spread传入设计器

代码示例

// 这个例子将一个现有的spread设置到设计器
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
designer.setWorkbook(spread);

参数

属性名	类型	说明
spread	Object	现有的spread对象，用来取代设计器默认的spread

返回值

void

---

unbind

▸ unbind(type, fn?): void

移除事件与设计器的绑定

代码示例

designer.bind(GC.Spread.Sheets.Designer.Events.FileLoaded, function(event,data){
    console.log("file has loaded")
});
designer.unbind(GC.Spread.Sheets.Designer.Events.FileLoaded);

参数

属性名	类型	说明
type	string	事件类型
fn?	any	要移除其绑定的函数

返回值

void

---

unbindAll

▸ unbindAll(): void

移除所有事件与设计器的绑定

代码示例

designer.bind(GC.Spread.Sheets.Designer.Events.FileLoaded, function(event,data){
    console.log("file has loaded")
});
designer.unbindAll();

返回值

void

---

RegisterComponent

▸ Static RegisterComponent(name, constructor): boolean

注册自定义组件

参数

属性名	类型	说明
name	string	组件名称，用此名称使用组件
constructor	any	组件类

返回值

boolean

是否注册成功