ReoGrid ReoGrid Web
form protection placeholder keyboard lite v1.6

フォームモード

保護シートを入力フォームとして使います。レイアウト固定、1クリック編集、プレースホルダー、Enter/Tabによる入力欄の移動に対応し、入力規則のリストもキーボードで選べます。

デモの解説

業務アプリでは、スプレッドシートを「表計算」ではなく「フォーム」として使うことがよくあります。レイアウトは固定、ほとんどのセルは保護され、ユーザーは決まった枠に値を埋めるだけ — 帳票アプリのかたちです。v1.6.0は、これをワークシートの4つのスイッチでカバーします。このデモは申し込みフォームです。枠を1回クリックして入力すれば、Enterだけで最後まで進めます。両エディションで利用できます。

  • ws.clickToEdit1回のクリックでキャレットを末尾に置いて編集に入り、編集可能セルの上ではカーソルがIビームになります。保護セルとチェックボックスなどのセル型は対象外です
  • ws.formNavigation — EnterとTabが確定して次の入力欄へ移動します(Shiftで逆方向)。保護セル・非表示の行と列・結合セルの内側を飛ばし、行の末尾で折り返す読み順スキャンです
  • ws.layoutLocked — ヘッダーのドラッグによるサイズ変更、ダブルクリックの自動調整、行・列まるごとの並べ替えを止めます。APIからのサイズ変更は有効なままなので、テンプレート側のコードは影響を受けません
  • setCellPlaceholder()が薄いヒント文字を描きます。空のセルにだけ表示され、セルの値には決して含まれません — PDF・印刷・xlsx・JSONにも出ません
  • 「ご希望プラン」では、編集中の、または選択中のAlt+↓でリストがキーボードから開きます。リストは現在値の位置で開くので、↓ → Enterの2打で選べます
  • 「Custom tab order」は、任意項目のNotesを飛ばすsetFormNavigator()を設定します。nullを返すとフォームの終わりで止まります
  • これらのスイッチはいずれも保存されないため、loadJson()reset()のあとに付け直してください

主要 API

ws.clickToEdit = true

1回のクリックでキャレットを末尾に置いて編集開始。編集可能セルの上ではIビームカーソルになります

ws.formNavigation = true

Enter / Tabが確定して読み順で次の入力欄へ移動します。Shiftで逆方向です

ws.layoutLocked = true

ヘッダーのドラッグ、ダブルクリックの自動調整、並べ替えを停止。APIからのサイズ変更は有効なままです

ws.setCellPlaceholder(r, c, text)

空のセルにだけ描かれるヒント文字。値・PDF・印刷・xlsx・JSONには出ません

ws.setFormNavigator(fn)

独自のタブ順。nullを返すとフォームの終わりで止まり、fnにnullを渡すと既定のスキャンに戻ります

ws.range('C4').setLock('unlocked')

ws.protected = true と組み合わせて、そのセルを入力欄にします

ソースコード

TypeScript

関連ドキュメント

関連デモ

ニュースレター

開発の最新情報をお届けします

新しいリリース・機能追加・お知らせをいち早く受け取るには、
メーリングリストにご登録ください。