SpreadJS製品ヘルプ
ドロップダウンオブジェクト
機能 > セル > ドロップダウンオブジェクト

SpreadJSでは、ワークシートにドロップダウンオブジェクトを追加できます。 本機能により、必要に応じて、ワークブック内のセルに特定のプロパティを含むドロップダウンメニューを追加できます。

ドロップダウンオブジェクトとは

ドロップダウンオブジェクトは、セルにデータを簡単ですばやく選択するのに役立つドロップダウンメニューを提供します。

本機能を使用することで、スプレッドシート内に入力フォームコントロール、高度な構造化フォーム、その他のインタラクティブフォームおよびダッシュボードを作成することができます。

ドロップダウンオブジェクトの種類 - SpreadJSでは、9種類の組み込みドロップダウンメニューを使用できます。
ユーザーがDropDownType 列挙体を使用して、0~8範囲内の値を指定すると、次に示すように、該当するセルドロップダウンが表示されます。

セルのドロップダウンを構成する- ドロップダウンリストで事前定義された値のリストの設定、ドロップダウン電卓で計算された値の設定、ドロップダウン日付時刻ピッカー、月ピッカー、および時刻ピッカーでカレンダーと予定の設定、ドロップダウンカラーピッカーで色の選択、ドロップダウンスライダーで範囲指定、ドロップダウンワークフローリストで以前の選択肢に基づいて次に使用可能な選択肢の自動再入力を行うようにドロップダウンオブジェクトを構成することができます。

ドロップダウン電卓

セルでドロップダウン電卓を使用すると、ユーザーが値を計算し、計算結果を入力できます。 次の図は、セルC3にてドロップダウンインジケーターのクリックで展開するドロップダウン電卓を使用するスプレッドシートを示します。

 

 

セル内のドロップダウン電卓を構成するには、次のサンプルコードで示しているように、StyleクラスのcellButtons フィールドによってドロップダウンボタンを追加し、そのコマンドパラメーターを「openCalculator」に設定します。

JavaScript
コードのコピー 
// ドロップダウン電卓を設定します。
var calStyle = new GC.Spread.Sheets.Style();
calStyle.cellButtons = [
{
  imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
  command: "openCalculator",
  useButtonStyle: true,
}];
activeSheet.setText(2, 3, "ドロップダウン電卓");
activeSheet.setStyle(2, 4, calStyle);

ドロップダウン日付時刻ピッカー

セルでドロップダウン日付時刻ピッカーを使用すると、日付や時刻を設定して入力できます。 次の図は、セルC5にてドロップダウンインジケーターのクリックで展開するドロップダウン日付時刻ピッカーを使用するスプレッドシートを示します。

ドロップダウン日付時刻ピッカーを構成するには、次のサンプルコードで示しているように、StyleクラスのcellButtonsフィールドによってドロップダウンボタンを追加し、そのコマンドパラメーターを「openDateTimePicker」に設定します。

JavaScript
コードのコピー 
// ドロップダウン日付時刻ピッカーを設定します。
var dateTimeStyle = new GC.Spread.Sheets.Style();
dateTimeStyle.cellButtons = [
{
  imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
  command: "openDateTimePicker",
  useButtonStyle: true,
}];
dateTimeStyle.dropDowns = [
{
  type: GC.Spread.Sheets.DropDownType.dateTimePicker,
  option: {
    showTime: true,
  }
}];
activeSheet.setText(4, 3, "ドロップダウン日付時刻ピッカー");
activeSheet.setStyle(4, 4, dateTimeStyle);

ドロップダウン月ピッカー

セルでドロップダウン月ピッカーを使用すると、ある年の特定の月を構成して入力できます。次の図は、セルC7にてドロップダウンインジケーターのクリックで展開するドロップダウン月ピッカーを使用するスプレッドシートを示します。

セルでドロップダウン月ピッカーを構成するには、次のサンプルコードで示しているように、Style クラスのcellButtons フィールドによってドロップダウンボタンを追加し、そのコマンドパラメーターを「openMonthPicker」に設定します。

JavaScript
コードのコピー 
// ドロップダウン月ピッカーを設定します。
var monthPickerStyle = new GC.Spread.Sheets.Style();
monthPickerStyle.cellButtons = [
{
  imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
  command: "openMonthPicker",
  useButtonStyle: true,
}];
monthPickerStyle.dropDowns = [
{
  type: GC.Spread.Sheets.DropDownType.monthPicker,
  option: {
    startYear: 2009,
    stopYear: 2019,
    height: 300,
  }
}];
activeSheet.setText(6, 3, "ドロップダウン月ピッカー");
activeSheet.setStyle(6, 4, monthPickerStyle);

ドロップダウン時刻ピッカー

ドロップダウン時刻ピッカーを使用すると、特定の時刻を構成して入力できます。次の図は、セルC9にてドロップダウンインジケーターのクリックで展開するドロップダウン時刻ピッカーを使用するスプレッドシートを示します。

ドロップダウン時刻ピッカーを設定するには、次のサンプルコードで示しているように、Style クラスのcellButtons フィールドによってドロップダウンボタンを追加し、そのコマンドパラメーターを「openTimePicker」に設定します。

JavaScript
コードのコピー 
// ドロップダウン時刻ピッカーを設定します。
var timePickerStyle = new GC.Spread.Sheets.Style();
timePickerStyle.cellButtons = [
{
  imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
  command: "openTimePicker",
  useButtonStyle: true,
}];
timePickerStyle.dropDowns = [
{
  type: GC.Spread.Sheets.DropDownType.timePicker,
  option: {
    min: {
      hour: 8
    },
    max: {
      hour: 19
    },
    step: {
      minute: 30
    },
    formatString: "h:mm 午前/午後",
  }
}];
activeSheet.setText(8, 3, "ドロップダウン時刻ピッカー");
activeSheet.setStyle(8, 4, timePickerStyle);

ドロップダウンカラーピッカー

ドロップダウンカラーピッカーを使用すると、特定の色を選択し、その16進コードを入力できます。次の図は、セルC11にてドロップダウンインジケーターのクリックで展開するドロップダウンカラーピッカーを使用するスプレッドシートを示します。

 

ドロップダウンカラーピッカーを設定するには、次のサンプルコードで示しているように、Style クラスのcellButtons フィールドによってドロップダウンボタンを追加し、そのコマンドパラメーターを「openColorPicker」に設定します。

JavaScript
コードのコピー 
// ドロップダウンカラーピッカーを設定します。
var colorPickerStyle = new GC.Spread.Sheets.Style();
colorPickerStyle.cellButtons = [
{
  imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
  command: "openColorPicker",
  useButtonStyle: true,
}];
activeSheet.setText(10, 3, "ドロップダウンカラーピッカー");
activeSheet.setStyle(10, 4, colorPickerStyle);

ドロップダウンリスト

ドロップダウンリストを使用すると、ドロップダウンリストから特定の項目を選択し、セルに値を入力できます。次の図は、セルC13にてドロップダウンインジケーターのクリックで展開するドロップダウンリストを使用するスプレッドシートを示します。

ドロップダウンリストを設定するには、次のサンプルコードで示しているように、Style クラスのcellButtons フィールドによってドロップダウンボタンを追加し、そのコマンドパラメーターを「openList」に設定します。

JavaScript
コードのコピー 
// ドロップダウンリストを設定します。
var listStyle = new GC.Spread.Sheets.Style();
listStyle.cellButtons = [
{
  imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
  command: "openList",
  useButtonStyle: true,
}];
listStyle.dropDowns = [
{
  type: GC.Spread.Sheets.DropDownType.list,
  option: {
    items: [
    {
      text: '項目1',
      value: 'item1'
    },
    {
      text: '項目2',
      value: 'item2'
    },
    {
      text: '項目3',
      value: 'item3'
    },
    {
      text: '項目4',
      value: 'item4'
    }],
  }
}];
activeSheet.setText(12, 3, "ドロップダウンリスト");
activeSheet.setStyle(12, 4, listStyle);

また、ドロップダウンリストから複数の項目を選択し、セルに値を入力できます。次の図に示すように、ドロップダウンから複数の項目を選択すると、その値がコンマで区切られます。

 

ドロップダウンリストから複数の項目を選択するには、次のサンプルコードで示しているように、multiselectプロパティをtrueに設定します。

JavaScript
コードのコピー 
 // リストのデータを設定します。
 var listData = {
     multiSelect: true,
      items: [
             {
                text: 'SpreadSheets',
                value: 'SpreadSheets',
                layout: { displayAs: GC.Spread.Sheets.LayoutDisplayAs.popup },
                items: [
                    {
                        text: 'Spread.NET',
                        value: 'Spread.NET'
                    },
                    {
                        text: 'SpreadJS',
                        value: 'SpreadJS'
                    },
                    {
                        text: 'Spread COM',
                        value: 'Spread COM'
                    },
                    {
                        text: 'DataViewJS',
                        value: 'DataViewJS'
                    }
                ]
            },
            {
                text: 'Javascript',
                value: 'Javascript',
            },
            {
                text: 'Reporting',
                value: 'Reporting',
            },
            {
                text: 'Document APIS',
                value: 'Document APIS',
                layout: { displayAs: GC.Spread.Sheets.LayoutDisplayAs.popup },
                items: [
                    {
                        text: 'Documents for Excel',
                        value: 'Documents for Excel'
                    },
                    {
                        text: 'Excel Template Language',
                        value: 'Excel Template Language'
                    },
                    {
                        text: 'Documents for PDF',
                        value: 'Documents for PDF'
                    },
                    {
                        text: 'Documents for PDF Viewer',
                        value: 'Documents for PDF Viewer'
                    },
                    {
                        text: 'Documents for Microsoft Word',
                        value: 'Documents for Microsoft Word'
                    },
                    {
                        text: 'Documents for Imaging',
                        value: 'Documents for Imaging'
                    }
                ]
            }
        ]
    };
    var style = new GC.Spread.Sheets.Style();
    style.cellButtons = [
        {
            imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
            command: "openList",
            useButtonStyle: true,
        }
    ];
    style.dropDowns = [
        {
            type: GC.Spread.Sheets.DropDownType.list,
            option: listData
        }
    ];
    activeSheet.setStyle(0, 0, style);
});

ドロップダウンスライダー

ドロップダウンスライダーを使用すると、セルに現在の値を入力する動的範囲のスライダーを追加できます。次の図は、セルC15にてドロップダウンインジケーターのクリックで展開するドロップダウンスライダーを使用するスプレッドシートを示します。

 

ドロップダウンスライダーを設定するには、次のサンプルコードで示しているように、Style クラスのcellButtons フィールドによってドロップダウンボタンを追加し、そのコマンドパラメーターを「openSlider」に設定します。

JavaScript
コードのコピー 
// ドロップダウンスライダーを設定します。
var horizontalSliderStyle = new GC.Spread.Sheets.Style();
horizontalSliderStyle.cellButtons = [
{
  imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
  command: "openSlider",
  useButtonStyle: true,
}];
horizontalSliderStyle.dropDowns = [
{
  type: GC.Spread.Sheets.DropDownType.slider,
  option: {
    marks: [0, 50, 100],
    step: 10,
    direction: GC.Spread.Sheets.LayoutDirection.horizontal,
  }
}];
activeSheet.setText(14, 3, "ドロップダウンスライダー");
activeSheet.setStyle(14, 4, horizontalSliderStyle);

ドロップダウンワークフローリスト

ドロップダウンワークフローリストを使用すると、ワークフローアイテムを簡単ですばやく選択し、セルに値を入力できます。次の図は、セルC17にてドロップダウンインジケーターのクリックで展開するドロップダウンワークフローリストを使用するスプレッドシートを示します。

ドロップダウンワークフローリストを設定するには、次のサンプルコードで示しているように、Style クラスのcellButtons フィールドによってドロップダウンボタンを追加し、そのコマンドパラメーターを「openWorkflowList」に設定します。

JavaScript
コードのコピー 
//ドロップダウンワークフローリストを設定します。
let workflowListStyle = new GC.Spread.Sheets.Style();
workflowListStyle.cellButtons = [
{
  imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
  command: "openWorkflowList",
  useButtonStyle: true,
}];
workflowListStyle.dropDowns = [
{
  type: GC.Spread.Sheets.DropDownType.workflowList,
  option: {
    items: [
    {
      value: "新規作成",
      transitions: [1]
    },
    {
      value: "開く",
      transitions: [0, 2, 3, 5]
    },
    {
      value: "処理中",
      transitions: [1, 3, 5]
    },
    {
      value: "解決済み",
      transitions: [5, 4]
    },
    {
      value: "再度開く",
      transitions: [5, 3, 2]
    },
    {
      value: "終了済み",
      transitions: [4]
    }, ]
  }
}];
activeSheet.setText(16, 3, "ドロップダウンワークフローリスト");
activeSheet.setStyle(16, 4, workflowListStyle);

ドロップダウンマルチカラムピッカー

マルチカラムピッカーを使用すると、ドロップダウンリストと編集可能な領域によって、値を入力したり、表示されているリストから選択したりすることができます。また、ButtonImageType列挙体をdropdownに設定し、DropDownType列挙体をmultiColumnに設定することで、セル内に複数列のドロップダウンを設定できます。

次の図は、セルにてドロップダウンインジケーターがあるマルチカラムピッカーを示します。

Setting multiple column dropdown

ドロップダウンリストをスクロールして、マウスとキーボードを使用してアイテムを選択できます。ドロップダウンリストから項目を選択すると、オブジェクトタイプとして現在のセル値が返され、ドロップダウンリストを再度開くと、選択した項目が強調表示されます。

返されたオブジェクト値に対して、PROPERTY関数を使用してオブジェクトを解析し、指定されたプロパティ値を取得できます。

ドロップダウンをカスタマイズするには、データソースを指定する必要があります。次は、サポートされているデータソースについて説明します。

メモ：

 

 

Copyright © 2016 GrapeCity inc. All rights reserved.