← TssGrid/例一覧

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 の要点)