コンボボックス型セル

コンボボックス型セルを作成してドロップダウンリストを表示できます。

コンボボックス型セルを編集可能にすることもできます。セルの編集部分に値を入力すると、これに一致する項目がリストから自動的に選択されます。

項目幅がセル幅より小さい場合、項目幅がセル幅に設定されます。 それ以外の場合、項目幅は最も長い項目幅に等しくなります。

ドロップダウンリストには、最大20の項目を表示できます。ドロップダウンリストが表示されているときは、上矢印または下矢印キーを使用して項目を選択します。左矢印キーと右矢印キーは、選択された項目を確定し、次のセルまたは前のセルに移動します。［Enter］キーを押しても、選択項目が確定されます。［Esc］キーを押すと、選択された項目が選択解除されます。

ラピッド入力モードの使用中は、矢印キーが通常どおり動作しない場合があります。セルエディタの状態が「EditorStatus.Enter」である場合、左または右矢印キーを押すと、編集が終了し、1つ前または次のセルに移動します。エディタの状態が「EditorStatus.Edit」である場合は、左または右矢印キーを押しても、編集は終了しません。

コードの使用

次のサンプルコードは、リストを備えたコンボボックス型セルを作成します。

var cellType2 = new GC.Spread.Sheets.CellTypes.ComboBox();cellType2.items(["a","b","c"]);activeSheet.getCell(2, 2).cellType(cellType2);

次のサンプルコードは、項目リストを備えた、編集可能なコンボボックス型セルを作成します。

var items2 = ["a", "ab", "abc", "apple", "boy", "cat", "dog"];
var eComboBoxCellType = new GC.Spread.Sheets.CellTypes.ComboBox().items(items2).editable(true);
activeSheet.getCell(1, 3).cellType(eComboBoxCellType);
activeSheet.setColumnWidth(3,120);

ドロップダウンの位置

コンボボックス型セルには、ドロップダウンの表示方法を設定する allowFloat プロパティがあります。 SpreadJS コンポーネント上にドロップダウンを表示するのに十分なスペースがない場合、またはドロップダウンがSpreadJSからはみ出して表示されるのを防ぐために、ドロップダウンの表示位置とサイズを管理するのに役立ちます。

SpreadJSにドロップダウンを表示するのに十分なスペースがない場合に、allowFloatプロパティをfalseに設定してドロップダウンを開くと、コンボボックス型セルはSpreadJSインスタンスの領域をはみ出さないように、ドロップダウンのサイズを調整します。

また、allowFloatプロパティをtrue（デフォルト値）に設定してドロップダウンを開いた場合は、ドロップダウンはSpreadJSインスタンスの領域外にはみ出して表示されます。

次の図は、allowFloatプロパティを設定した場合に、コンボボックス型セルがドロップダウンを表示する方法を示します。