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

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

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

1. config.jsファイルを編集して、[ホーム]タブの[buttonGroups]フィールドに[データの保存]ボタンを追加します。

   JavaScript

   コードのコピー

   var config = {     "ribbon": [         {           "id": "home",           "text": "HOME",           "buttonGroups": [               // カスタムの[データの保存]ボタン。               {                 "label": "データの保存",                 "thumbnailClass": "",                 "commandGroup": {                     "children": [                         {                          "direction": "vertical",                          "commands": [                          "cmdSaveData"                           ]                         }                       ]                    }               },

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

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

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

   JavaScript	コードのコピー
   .cmdSaveData { background-image: url('./saveData.png'); background-size: 35px 35px; }

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

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

   
   

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

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

リボンにチェックボックスを追加し、チェックボックスのチェック状態を管理できます。上記の手順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に従うと、以下の出力が生成されます。