セルの状態

SpreadJSでは、編集状態、ホバリング状態、アクティブ状態、選択状態、無効な数式状態など、セルの状態に合わせてカスタムセルスタイルを構成できます。

本機能は、セルの現在の状態に応じてセルスタイルを設定することで、スプレッドシートでインタラクティブな入力フォームなどを作成するのに役立ちます。

例- 次の図は、セルホバー、セル選択、およびセル状態の変更のスタイルを示しています。この例では、セルがホバー状態のときに、セルの背景色がピンク色に変わり、前景色が赤色に変わります。また、セルを選択すると、セルの色が黄色に変わり、セル状態がダーティになると、背景色が青に、前景色が赤に変わります。

セル状態の種類

さまざまなセル状態の設定には、次の表のようなCellStatesType列挙体を使用します。

列挙型と値	説明
hover = 0x01	マウスがセル上でホバーしている状態です。
invalid = 0x02	データ検証時に評価が失敗し、セルの値が無効である状態です。
readonly = 0x04	保護されたワークシート内でセルがロックされ読み取り専用状態です。
edit = 0x08	セルが編集されている状態です。
active = 0x10	セルにフォーカスがある状態です。
selected = 0x20	セルがワークシートの選択範囲に含まれる状態です。
dirty = 0x40	セル値またはセル参照が変更された時にセルの状態がダーティに設定されます。
invalidFormula = 0x80	セルに無効な数式文字列が入力された状態です。

優先順位

ワークシート内のさまざまなセル状態に対して異なるセルスタイルを構成する際、優先順位は次のようになります。

編集 > ホバー > アクティブ > 選択 > 無効な数式 > ダーティ > 無効 > 読み取り専用

この場合、通常状態のセルの優先度が最も低く、編集モードのセルの優先度が最も高くなります。

2つの異なるセル範囲のセル状態のスタイルが互いに交差する場合、最後に設定したスタイルがより優先されます。

コードの使用

次のサンプルコードは、スプレッドシートにてセルホバーとセル選択のスタイルを適用する方法を示しています。

// Spreadを初期化します。
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// activesheetを取得します。
var activeSheet = spread.getSheet(0);
// スプレッドシートにデータを追加します。
activeSheet.setValue(0, 1, "2015年");
activeSheet.setValue(0, 2, "2016年");
activeSheet.setValue(0, 3, "2017年");
activeSheet.setValue(0, 4, "2018年");
activeSheet.setValue(0, 5, "2019年");
activeSheet.setValue(1, 0, "Gradlco");
activeSheet.setValue(2, 0, "Saagiate");
activeSheet.setValue(3, 0, "Inferno");
activeSheet.setColumnWidth(0, 120);
// ホバースタイルを作成します。
var hoverStyle = new GC.Spread.Sheets.Style();
hoverStyle.backColor = "pink";
hoverStyle.foreColor = "red";
// 選択スタイルを作成します。
var selectStyle = new GC.Spread.Sheets.Style();
selectStyle.backColor = "yellow";
selectStyle.foreColor = "red";
// ダーティスタイルを作成します。
var dirtyStyle = new GC.Spread.Sheets.Style();
dirtyStyle.backColor = 'lightblue';
dirtyStyle.foreColor = 'red';
// セル範囲（A1：J10）にアクセスします
var range = new GC.Spread.Sheets.Range(0, 0, 10, 10);
// さまざまなセル状態に対して異なるセルスタイルを適用します
activeSheet.cellStates.add(range, GC.Spread.Sheets.CellStatesType.dirty, dirtyStyle);
activeSheet.cellStates.add(range, GC.Spread.Sheets.CellStatesType.selected, selectStyle);
activeSheet.cellStates.add(range, GC.Spread.Sheets.CellStatesType.hover, hoverStyle);