チェックボックス型セル

SpreadJS のチェックボックス型セルは、スプレッドシートのセル内でユーザーがバイナリ状態（チェック済み／未チェック）や三状態モード（不定状態を含む）を切り替えられる、インタラクティブなコントロールです。従来のドロップダウンやラジオボタンの代わりに、直感的なビジュアルマーカーとして利用できます。

基本的な使い方

チェックボックス型セルは、GC.Spread.Sheets.CellTypes.CheckBoxクラスを使用して作成します。これにより、外観の定義、状態遷移（チェック済み／未チェック／不定）の管理、レイアウト（textAlign）の指定、textTrue、textFalse、isThreeState、boxSizeなど主要プロパティによるインタラクティブ動作の調整が可能です。

以下は、チェックボックス型セルを作成・設定する実用例です：

以下は、CheckBoxセルタイプをカスタムプロパティ付きでインスタンス化・設定する実用例です：

//この例では、チェックボックスセルを作成します。
var sheet = spread.getActiveSheet();
var cellType = new GC.Spread.Sheets.CellTypes.CheckBox();
cellType.caption("caption");
cellType.textTrue("true");
cellType.textFalse("false");
cellType.textIndeterminate("indeterminate");
cellType.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.bottom);
cellType.boxSize(20);
sheet.getCell(1, 1).cellType(cellType);

不定状態

チェックボックス型セルでは、三状態機能を有効化することで、チェック済み・未チェック・不定の各状態を表現できます。isThreeState() を使用するだけで、部分的または未定義状態が必要なシナリオに対応したチェックボックスを設定できます。

次の表のように、valueメソッドを使用して、コードでチェックボックスの状態を変更することができます。

チェックボックスのサイズを変更するには、 boxSize() メソッドを使用できます。boxSize() メソッドの値を、任意の数値または「auto」に設定できます。本メソッドで不正な値が指定された場合、チェックボックスのサイズは変更されません。チェックボックスの標準サイズは12*12ピクセルです。

コードの使用

次のサンプルコードは、3状態のチェックボックス型セルを作成します。

// activeSheetを取得します。
var sheet = spread.getActiveSheet();
var cellType = new GC.Spread.Sheets.CellTypes.CheckBox();
cellType.caption("caption");
cellType.textTrue("True");
cellType.textFalse("False");
cellType.textIndeterminate("Indeterminate");
cellType.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.bottom);
cellType.isThreeState(true);
cellType.boxSize(20);
sheet.getCell(1, 1).cellType(cellType);
//activeSheet.getCell(1, 1).value(1);

チェックボックス型セルでのテキストの折り返し

チェックボックス型セルのキャプションをセルに収めるには、スタイルの wordWrap プロパティを true に設定します。これにより、キャプションがセル内で折り返して表示されます。

// 長いキャプションを設定します。
var sheet = spread.getActiveSheet();
sheet.setRowHeight(1, 120); 
sheet.setRowHeight(2, 120); 
sheet.setColumnWidth(0, 120); 
sheet.setColumnWidth(1, 120); 

var cellType = new GC.Spread.Sheets.CellTypes.CheckBox();
cellType.caption("これは非常に長いサンプルテキストです。");

sheet.setValue(1, 0,"wordWrap = false")
sheet.getCell(1, 1).cellType(cellType);

// チェックボックス型セルに wordwrap メソッドを実装します。
sheet.setValue(2, 0,"wordWrap = true")
sheet.getCell(2, 1).cellType(cellType);
sheet.getCell(2, 1).wordWrap(true);

チェックボックス型セルでテキストを折り返し、垂直揃えを設定すると、チェックボックスは以下のように表示されます。

セルの hAlign を使用して、折り返したテキストの水平揃えを変更することができます。例えば、セルの hAlign が right の場合、テキストのみはセルの左揃えになります。同様に、セルの hAlign が left または center の場合、テキストはセルの左揃えまたは中央揃えになります。

トグルモード

CheckBox.mode('toggle') メソッドを使用することで、標準のチェックボックスをインタラクティブなトグルスイッチに変換できます。

​​主な機能​​

• 外観のカスタマイズ​​

  IToggleOptions インターフェースを通じて視覚プロパティを設定可能：

  ​​サイズ​​：width／height の固定値を設定、または autoSize で動的なテキストスケーリングを有効化。

  ​​色​​：スイッチオン（sliderColorOn, trackColorOn）およびスイッチオフ（sliderColorOff, trackColorOff）状態の色を指定。

  ​​アニメーション​​：animationDurationでスイッチ切り替え時の速さを制御。

  ​​レイアウト​​：sliderMargin（スライダーとトラック間の間隔）、trackRadius（角丸半径）を調整。

• テキスト位置合わせ​​

  CheckBoxTextAlign.inside オプションを利用すると、トグルボタン内部に直接テキストを埋め込めるため、省スペースなレイアウトが実現可能。既存の位置合わせオプション（上、下、左、右）にも対応。

利用上の制約

• 無効化プロパティ：トグルモードでは boxSize、isThreeState、textIndeterminate などのプロパティは ​​利用不可​​ となり、設定は無効となります。

• ​​操作制限​​：ダブルクリック編集は ​​無効​​ であり、状態変更は ​​トグルボタンのクリックのみ​​（セル領域クリックでは不可）で行われます。

• ​​テキスト位置合わせ​​：autoSize: false かつ textAlign: inside の場合、autoFitWidth／autoFitHeight は ​​テキストのオーバーフローを無視​​ し、トグルボタンのサイズのみ考慮します。

コードでの使用例

この例では、チェックボックス型セルにトグルモードを実装しています。

var sheet = spread.getActiveSheet();
var cellType = new GC.Spread.Sheets.CellTypes.CheckBox();
cellType.textTrue('ON');
cellType.textFalse('OFF');
cellType.mode('toggle');
cellType.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
cellType.toggleOptions({
  width: 65,
  height: 30,
  sliderMargin: 2,
  trackColorOn: '#8cbae8',
  trackColorOff: '#9e9e9e',
  sliderColorOn: '#1565c0',
  sliderColorOff: '#ffffff',
});
sheet.setCellType(0, 0, cellType);