ボタンリスト型セル

Spread.Sheetsでは、スプレッドシートのセル内にボタンリストを作成できます。

ボタンリストとは

ボタンリストは、複数選択可能な値を持つインタラクティブなリストを指します。セル内に埋め込まれているアイテムのグループを表示し、1つまたは複数オプションを選択できるため、エンドユーザーの応答を記録するのに役立ちます。ユーザーは、ワークシートにボタンリスト型セルを作成し、必要に応じてアイテムのレイアウトを構成できます。

使用例

ボタンリストは、連絡先、顧客、会計、イベント、マーケティングリストなど、複数の関連エンティティにわたってターゲット設定およびクエリできる関連アイテムのグループを作成する場合に役立ちます。

例：次の図は、ユーザーが使用したいプログラミング言語を記録するスプレッドシートを示しています。この例では、ユーザーがリストから1つ以上の言語を選択できるように、ボタンリスト型セルがセルB2に追加されています。

ボタンリストをカスタマイズする

Spread.Sheetsでボタンリスト型セルをカスタマイズするには、次のタスクを実行できます。

ボタンセルのテキスト選択モードをSingleまたはMultipleとして指定するには、SelectionMode列挙体を使用できます。
リスト内の選択されているボタン項目の背景色や前景色をカスタマイズするには、ButtonList クラスのselectedBackColor() メソッドおよびselectedForeColor() メソッドを使用できます。
セルに関連するボタンリスト内の項目のパディング（ピクセル単位）をカスタマイズするには、padding() メソッドを使用できます。
ボタンリストのレイアウトが自動調整に設定されているかどうかを識別するには、isFlowLayout() メソッドを使用できます。デフォルトでは、このメソッドの値パラメーターは「true」に設定されています。
ボタンリスト型セルの方向を水平方向または垂直方向に設定するには、Direction列挙体を使用できます。
ボタンリストの行数や列数の項目を取得または設定するには、maxRowCount() メソッドとmaxColumnCount() メソッドを使用できます。 isFlowLayout() メソッドのvalueパラメーターがtrueと方向が水平方向に設定されている場合のみ使用できます。
セルのリスト項目内が混みあっている場合、itemSpacing() メソッドを使用してリスト項目間の間隔を設定できます。

コードの使用

次のサンプルコードは、スプレッドシートを操作する際、基本的なボタンリスト型セルを作成する方法を示します。

JavaScript	コードのコピー
// Spreadを初期化します。 var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 }); // activeSheetを取得します。 var activeSheet = spread.getSheet(0); // ボタンリスト型セルを作成します。 var buttonListCellType = new GC.Spread.Sheets.CellTypes.ButtonList(); activeSheet.setText(0, 1, "プログラミング言語を選択してください。", GC.Spread.Sheets.SheetArea.viewport); buttonListCellType.items([{ text: "Javascript", value: 1 }, { text: "Python", value: 2 }, { text: "Java", value: 3 }, { text: "PHP", value: 4 }, { text: "Objective-C", value: 5 }, { text: "Ruby", value: 6 }, { text: "SQL", value: 7 }, { text: "Swift", value: 8 }, { text: "C/CPP", value: 9 }, { text: "C#", value: 10 }]); activeSheet.getCell(1, 1).cellType(buttonListCellType); // buttonListCellTypeのDirectionを垂直方向に設定します。 buttonListCellType.direction(GC.Spread.Sheets.CellTypes.Direction.vertical); // ボタンリストの項目間の間隔を設定します。 buttonListCellType.itemSpacing({ horizontal: 80, vertical: 20 }); // 行の高さを設定します。 activeSheet.setRowHeight(1, 250.0, GC.Spread.Sheets.SheetArea.viewport); // 列幅を設定します。 activeSheet.setColumnWidth(1, 250.0, GC.Spread.Sheets.SheetArea.viewport);

JavaScript

コードのコピー

// Spreadを初期化します。
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), {
  sheetCount: 1
});
// activeSheetを取得します。
var activeSheet = spread.getSheet(0);
// ボタンリスト型セルを作成します。
var buttonListCellType = new GC.Spread.Sheets.CellTypes.ButtonList();
activeSheet.setText(0, 1, "プログラミング言語を選択してください。", GC.Spread.Sheets.SheetArea.viewport);
buttonListCellType.items([{
  text: "Javascript",
  value: 1
}, {
  text: "Python",
  value: 2
}, {
  text: "Java",
  value: 3
}, {
  text: "PHP",
  value: 4
}, {
  text: "Objective-C",
  value: 5
}, {
  text: "Ruby",
  value: 6
}, {
  text: "SQL",
  value: 7
}, {
  text: "Swift",
  value: 8
}, {
  text: "C/CPP",
  value: 9
}, {
  text: "C#",
  value: 10
}]);
activeSheet.getCell(1, 1).cellType(buttonListCellType);
// buttonListCellTypeのDirectionを垂直方向に設定します。
buttonListCellType.direction(GC.Spread.Sheets.CellTypes.Direction.vertical);
// ボタンリストの項目間の間隔を設定します。
buttonListCellType.itemSpacing({
  horizontal: 80,
  vertical: 20
});
// 行の高さを設定します。
activeSheet.setRowHeight(1, 250.0, GC.Spread.Sheets.SheetArea.viewport);
// 列幅を設定します。
activeSheet.setColumnWidth(1, 250.0, GC.Spread.Sheets.SheetArea.viewport);