GC.Spread.Sheets.Designer.Designer

クラス: Designer

Sheets.Designer.Designer

コンストラクタ

constructor

メソッド

コンストラクタ

constructor

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

指定されたホストされたDOM要素、カスタム構成、および既存のスプレッドを使用してデザイナを表します。

実例

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`	この領域は、リボンコンテナがマウントするHTML領域です。
`config?`	`IDesignerConfig`	デザイナの構成オブジェクト。
`spread?`	`Object`	Workbookインスタンス。
`spreadOptions?`	`Object`	ワークブックの初期化オプション。

メソッド

activeRibbonTab

▸ activeRibbonTab(ribbonTabId?): string

デザイナのアクティブなリボンタブ ID を取得または設定します。リボンタブ ID は DefaultConfig に記載します。

実例

// このサンプルコードは、デザイナの初期化後にデザイナのアクティブなリボンタブを設定します。
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(); // アクティブなリボンタブ ID を取得します。
if (currentActiveRibbonTab !== "insert") {
    designer.activeRibbonTab("insert"); // これにより、INSERT リボンタブがアクティブに設定されます。
}

パラメータ

名前	型	説明
`ribbonTabId?`	`string`	新しいアクティブなリボンタブ ID。

戻り値

string

デザイナの現在アクティブなリボンタブ 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

状態または値を設定します。データには2つのタイプがあります。1つ目は1つのコンポーネントでのみ使用するローカルデータであり、もう1つはデザイナ環境全体で使用するグローバルデータです。 designer.setData(key, value)は、デザイナのインスタンスがある場所のkey-valueによってデザイナに格納されているグローバルデータを設定できます。

実例

// この例では、「リボン->ホーム」のように1つの場所にグローバルデータを設定し、「リボン->設定」のように別の場所にこのグローバルデータを取得します。どちらの場所にもデザイナーインスタンスがあります。
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`	データ名は、1つの状態データを一意に識別します。

戻り値

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

実例

// この例では、「リボン->ホーム」のように1つの場所にグローバルデータを設定し、「リボン->設定」のように別の場所にこのグローバルデータを取得します。どちらの場所にもデザイナーインスタンスがあります。
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`	データ名は、1つの状態データを一意に識別します。異なる値を使用して同じキーを何度も設定すると、最新の値のみが保存されます。
`value`	`any`	このデータ名の値または状態。オブジェクト、文字列、またはその他のタイプである可能性があります。

戻り値

void

setWorkbook

▸ setWorkbook(spread): void

既存のスプレッドを使用してデザイナのスプレッドを設定します。

実例

// このサンプルコードは、既存のスプレッドをデザイナに設定します。
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`	デザイナの古いスプレッドを置き換えるために使用する既存のスプレッド。

戻り値

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

登録が成功したかどうか。

GC.Spread.Sheets.Designer.Designer

クラス: Designer

Table of contents

コンストラクタ

メソッド

コンストラクタ

constructor

パラメータ

メソッド

activeRibbonTab

パラメータ

戻り値

bind

パラメータ

戻り値

destroy

戻り値

getData

パラメータ

戻り値

getWorkbook

戻り値

refresh

戻り値

setConfig

パラメータ

戻り値

setData

パラメータ

戻り値

setWorkbook

パラメータ

戻り値

unbind

パラメータ

戻り値

unbindAll

戻り値

RegisterComponent

パラメータ

戻り値