SpreadJS製品ヘルプ
セルボタン
SpreadJS > 開発者の手引き > 機能 > ユーザーインタフェースの管理 > セルボタン

Spread.Sheetsでは、スプレッドシートの使いやすさを高めるために、セルボタンの機能が提供されています。

セルボタンとは

セルボタンは、ドロップダウンボタン、元に戻す/やり直しボタン、有効化/無効化ボタン、スピンボタンなどの事前定義ボタンの集まりであり、セルの余白に追加することで、追加機能を構成できます。たとえば、ドロップダウンセルボタンを使用すると、ユーザーからのさまざまなデータ入力を受け入れるため、ドロップダウンメニューを表示できます。

セルにボタンを統合することで、ワークブックの機能性を強化できます。また、セルボタンのクリック、ホバーやセルの編集などで特定の動作を実行するようにコードを記述できます。

例： カラーピッカードロップダウンを表示するボタンを作成するには、セルに対して「カスタムのカラーピッカー」という名前でスタイルを定義できます。スタイルを適用することで、任意のセルをカラーピッカー（または日付ピッカーなど）のように構成できます。

セルボタンを追加する

スプレッドシートでは、次の種類のセルボタンを追加できます。

セルボタンを構成する

次の表は、セルボタンを構成できるさまざまなプロパティの一覧を示します。

プロパティ 説明
ButtonPosition セルボタンの位置を指定するButtonPosition列挙型です。次の値を使用して、セルボタンの位置を左または右に設定し、そのボタンを表示するカスタムスタイルを作成できます。
  • left = 0; セルの左側にセルボタンが表示されることを示します。
  • right =1; セルの右側にセルボタンが表示されることを示します。
CaptionAlignment セルボタン内のキャプションの位置を指定するCaptionAlignment列挙型です。次の値を使用して、キャプションの位置を左または右に設定できます。
  • left = 0; セルボタンの左側にキャプションが表示されることを示します。
  • right =1; セルボタンの右側にキャプションが表示されることを示します。
ButtonImageType セルボタンの画像の種類を指定するButtonImageType列挙型です。次の値を使用して、必要に応じてボタンの画像の種類を構成できます。
値 説明
none = 0 セルボタンの画像の種類がnoneであることを示します。
custom=1 セルボタンの画像の種類がcustomであることを示します。
clear=2 セルボタンの画像の種類がclearであることを示します。
cancel = 3 セルボタンの画像の種類がcancelであることを示します。
Ok = 4 セルボタンの画像の種類がOkであることを示します。
Dropdown = 5 セルボタンの画像の種類がdropdownであることを示します。
ellipsis = 6 セルボタンの画像の種類がellipsisであることを示します。
left =7 セルボタンの画像の種類がleftであることを示します。
right=8 セルボタンの画像の種類がrightであることを示します。
plus=9 セルボタンの画像の種類がplusであることを示します。
minus =10 セルボタンの画像の種類がminusであることを示します。
undo=11 セルボタンの画像の種類がundoであることを示します。
redo =12 セルボタンの画像の種類がredoであることを示します。
search =13 セルボタンの画像の種類がsearchであることを示します。
separator =14 セルボタンの画像の種類がseparatorであることを示します。
spinLeft=15 セルボタンの画像の種類がspinLeftであることを示します。
spinRight=16 セルボタンの画像の種類がspinRightであることを示します。
ButtonVisibility セルボタンの可視性を指定するButtonVisibility列挙型です。次の値を使用して、セルの状態に応じてセルボタンを表示するか非表示にするかを選択できます。
  • always =0; セルボタンが常に表示されることを示します。
  • onSelected =1; セルがアクティブ状態のときにのみセルボタンが表示されることを示します。
  • onEditing =2; セルが編集モードに入ったときにのみセルボタンが表示されることを示します。
caption キャプションに表示されるボタンの文字列を指定します。
position セル内のボタンの位置を指定します。
enabled セルボタンがユーザーアクションに応答するかどうかを指定します。デフォルト値はtrueです。
useButtonStyle セルボタンがボタンスタイルであるかどうかを指定します。 デフォルト値はfalseです。
width ボタンの幅を指定します。このプロパティの値をnullまたは未定義に設定すると、ボタンの幅は画像のサイズやキャプションのテキストに基づいて自動的に調整されます。
visibility ボタンの表示・非表示を指定します。always 、onselect 、edit の3つのオプションを使用できます。
imageType ボタンに表示する画像の種類を指定します。デフォルト値はcustomです。
command セルボタンがクリックされたときに、spreadのコマンドまたはコールバックを実行できます。
imageSrc imageTypeがcustomに設定されている場合、アップロードする画像のソースを指定します。
captionAlign 画像とキャプションの位置を指定します。 利用可能なオプションはleftとrightです。
imageSize 画像のサイズを指定します。 デフォルト値は16pxです。

ボタンのコマンドを定義する

セルボタンを作成した後、次の表で示しているようにコマンドアクションを指定して、ボタンにさまざまな機能を設定することができます。

コマンドオプション 説明
openColorPicker ボタンのclickイベントでドロップダウンカラーピッカーを開く場合に使用します。
openDateTimePicker ボタンのclickイベントでドロップダウン日付時刻ピッカーを開く場合に使用します。
openTimePicker  ボタンのclickイベントでドロップダウン時刻ピッカーを開く場合に使用します。
openMonthPicker ボタンのclickイベントでドロップダウン月ピッカーを開く場合に使用します。
openSlider ボタンのclickイベントでスライダーコントロールを開く場合に使用します。
openWorkflowList ボタンのclickイベントでドロップダウンワークフローのリストを開く場合に使用します。
openCalculator ボタンのclickイベントでドロップダウン電卓を開く場合に使用します。
openList ボタンのclickイベントでドロップダウンリストを開く場合に使用します。

コードの使用

次のサンプルコードは、ワークシートにさまざまな種類のセルボタンを追加する方法を示します。

JavaScript
コードのコピー 
$(document).ready(function ()
{
   // ワークブックとワークシートを構成します。
   var spread = new GC.Spread.Sheets.Workbook($("#sampleDiv")[0]);
   var activeSheet = spread.getActiveSheet();
   activeSheet.setColumnWidth(3, 300);
   activeSheet.setColumnWidth(4, 200);

   // キャプション付き基本ボタンを追加します。
   var basicButttonStyle = new GC.Spread.Sheets.Style();
   basicButttonStyle.cellButtons =
   [
     {
        caption: "Insert"
     }   
   ];
  
   activeSheet.setText(2, 3, "キャプション付き基本ボタン");
   activeSheet.setStyle(2, 4, basicButttonStyle);
  
    // 位置、スタイル、有効/無効などのさまざまな構成を設定できるボタンを追加します。

    var customButtonStyle = new GC.Spread.Sheets.Style();
    customButtonStyle.cellButtons =
    [
      {
        caption: "有効です",
        useButtonStyle: true,
        enabled: true,
        position: GC.Spread.Sheets.ButtonPosition.left
      },
      {
        caption: "無効です",
        useButtonStyle: false,
        enabled: false,
        position: GC.Spread.Sheets.ButtonPosition.right
      }
      ];
     activeSheet.setText(4, 3, "有効/無効ボタン");
     activeSheet.setStyle(4, 4, customButtonStyle);
   
    // 組み込みおよびカスタムの画像を持つボタンを追加します。
    var ImageStyle = new GC.Spread.Sheets.Style();
    ImageStyle.cellButtons =
    [
      {
        useButtonStyle: true,
        imageSize: {
        height: 8,
        width: 8
       },
       imageType: GC.Spread.Sheets.ButtonImageType.ellipsis
      },
      {
      useButtonStyle: true,
      imageType: GC.Spread.Sheets.ButtonImageType.custom,
      imageSrc:"data:image/bmp;base64,
      Qk1eAAAAAAAAAD4AAAAoAAAACAAAAAgAAAABAAEAAAAAACAAAADEDgAAxA4AAAAAAAAAAAAAAAAAAP///
      wB+AAAApQAAANsAAAClAAAApQAAANsAAAClAAAAfgAAAA=="
     }
     ];
     activeSheet.setText(6, 3, "画像を持つボタン");
     activeSheet.setStyle(6, 4, ImageStyle);
    
     // コマンドアクションを付けたドロップダウンボタンを追加します。
     var dropdownStylecommand = new GC.Spread.Sheets.Style();
     dropdownStylecommand.cellButtons =
     [
       {
         imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
         command: "openColorPicker"
       }
       ];
       activeSheet.setText(8, 3, "コマンドを付けたドロップダウンボタン");
       activeSheet.setStyle(8, 4, dropdownStylecommand);
      
      // コマンド関数を付けたドロップダウンボタンを追加します。
      var dropdownStylefunction = new GC.Spread.Sheets.Style();
      dropdownStylefunction.cellButtons =
      [
        {
           imageType: GC.Spread.Sheets.ButtonImageType.search,
           command: (sheet, row, col, option) =>
            {
              if (sheet.zoom() === 1)
               {
                  sheet.zoom(1.5);
               }
              else
               {
                  sheet.zoom(1);
               }
             }
         }
       ];
       
     activeSheet.setText(10, 3, "コマンド関数を付けたドロップダウンボタン");
     activeSheet.setStyle(10, 4, dropdownStylefunction);
});

 

 

Copyright © 2016 GrapeCity inc. All rights reserved.