TssGrid 例: プルダウン+「その他」で自由入力 コードと値のペア
「選択肢から選ぶ。ただし『その他』を選んだら自由入力」を、業務側でその他かどうかを分岐せずに扱えるようにする例。
モデルは (コード, 値) のペア:コードはそのまま(選んだ項目の code、その他なら固定 code)/値だけが「選択ラベル or 入力文字列」に変わる。
やり方は3通り。C=tss-combo(本命・1操作で code と値を両方書く)/A=tss-autocomplete(そもそも自由入力主体)/B=2セル(dropdown+詳細列を readonly 切替)。全部このページに載せています。
C. tss-combo 本命
値列にエディタを付け、codeField で別のコード列へ書き戻す。通常項目=(code, label)/「その他」=(その他code, 入力値)。下の JSON がリアルタイムの (コード, 値) ペア。編集して確かめてください。
C-1 基本:コード列+名称列を両方表示
支払方法セル(▾)を編集。コード列は裏側で自動追従(ここでは見えるように表示)。「その他…」で自由入力に切替。
C-2 コード列は隠して名称だけ見せる
hidden:true でコード列を非表示にしても、データには code が入り続ける(下の JSON で確認)。
C-3 「その他」なし=素のコード選択
other を省略すると自由入力は出ず、コード付きプルダウンとして機能(core の options:{value,label} と同義だが、コードを別列に書き戻せる)。
C-4 options を文字列配列で
options: ['A','B','C'] のように文字列でも可(code=label)。その他あり。
A. tss-autocomplete(自由入力主体) 代替
「だいたい決まってるが新規もある」項目(取引先名など)向け。strict:false で候補から選んでも新規に打ってもOK。「その他」項目は不要=リストに無ければそのまま入力。コードは持たない単一値。
B. 2セル:dropdown+詳細列を readonly 切替 代替
種別で「その他」を選んだ行だけ、隣の「詳細」列を編集可能にする(onAfterChange+setCellReadOnly)。種別と自由入力を明確に別セルで持ちたい時に。
差し込み(C の要点)