タブにボタンの追加

SpreadJSリボンコンテナでは、リボンにボタンまたはチェックボックスを追加できます。

[データの保存]ボタンの追加

リボンの［ホーム］タブに［データの保存］ボタンを追加するには、次の手段を実行します。

1. デフォルト構成を取得します。

   // ワークブックとワークシートを構成します。
   var spread = new GC.Spread.Sheets.Workbook("ss");
   var activeSheet = spread.getActiveSheet();
   
   // デフォルトconfigを取得します。
   var config = GC.Spread.Sheets.Designer.DefaultConfig;

   
   

2. 「データの保存」ボタンのレイアウト構造を作成し、「ホーム」リボンの「buttonGroups」フィールドに追加します。

   // 新しいボタンのレイアウト
   var saveData = {
       "label": "データの保存",
       "thumbnailClass": "",
       "commandGroup": {
           "children": [
               {
                   "direction": "vertical",
                   "commands": [
                       "cmdSaveData"
                   ]
               }
           ]
       }
   }
   
   // configのリボンタブに新しいボタンを追加します。
   config.ribbon[0].buttonGroups.unshift(saveData);

   
   

3. プロジェクトで上記のコマンドをcommandMapに設定します。

   // 新しいボタンのコマンドを作成します。
   config.commandMap = {
       cmdSaveData: {
       title: "サーバーにデータを保存します",
       text: "保存",
       iconClass: "cmdSaveData",
       bigButton: "true",
       commandName: "cmdSaveData",
       execute: async (context, propertyName, fontItalicChecked) => {
       // 演算子をカスタマイズします。
       alert('データを正常に保存します。');
           }
       }
   }

   
   

4. 「cmdSaveData」ボタンのCSSスタイルを設定します。

   <!-- 新しいボタンのCSSスタイル設定。 -->
   <style>.cmdSaveData {
       background-image: url('./saveData.png');
       background-size: 35px 35px;
   }
   </style>

   
   

5. カスタマイズ可能な構成のために「config」パラメータを渡すデザイナのインスタンスを初期化します。

   // デザイナのインスタンスを初期化します。
   var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), config, spread);

上記の手順に従うと、以下の出力が生成されます。

メモ :config.jsまたはプロジェクトにcommandMapを定義することで、ボタンまたはコマンドのデフォルトの動作をオーバーライドできます。

リボンにチェックボックスの追加

リボンにチェックボックスを追加し、チェックボックスのチェック状態を管理できます。上記の手順1に従って、チェックボックスのラベル名を追加し、「MyCheckbox」コマンドを作成します。また、次のように、プロジェクトで「MyCheckbox」コマンドをcommandMapに設定します。

config.commandMap = {
    MyCheckbox: {
            title: "カスタムのチェックボックス",
            text: "MyCheckbox",
            type: 'checkbox',
            commandName: "MyCheckbox",
            execute: async (context, propertyName) => {
            let state = context.getData("myCheckState");
            context.setData("myCheckState", !state);
            },
            getState: (context) => {
                return context.getData("myCheckState");
            }
    }
}

                

上記の手順4に従うと、以下の出力が生成されます。