← TssGrid/例一覧

TssGrid 例: セル内の改行(複数行入力)

列に multiline: true を付けるだけで、その列だけセル内で改行できます。編集は隠しテキストエリアで行うので、TssGrid の本命である日本語IMEの直打ち(セルに来ていきなり変換入力・1文字目が落ちない)はそのまま。表示は改行を保持(white-space: pre-wrap)。
行の高さは固定(内容で伸びません=行高一定なので大量行・仮想スクロールでも崩れない)。rowHeight(または rowHeights)で見せる行数ぶんの高さを確保し、はみ出した分はクリップされます。複数行セルの右上に薄いマークが出て「ここは複数行」と分かる(multilineMark:false で消す/CSS変数 --tg-ml-mark で色替え)。
Enter の意味は起動時に選べます(同一画面で混在なし前提)。既定は「Enterで確定」(改行は Alt+Enter/Excel風)。「Enterで改行」(確定は Ctrl+Enter/メモ帳風)も選べます。下のトグルで切り替えて試せます。
改行モード(multilineEnter)  

デモ(「メモ」列が複数行・3行ぶんの高さ)

設定(抜粋)

new TssGrid(host, {
  defaultRowHeight: 64,          // 3行ぶんの高さを確保(固定・自動では伸びない)
  multilineEnter: 'commit',      // 既定=Excel風(Enter=確定 / Alt+Enter=改行)。'newline' でメモ帳風
  multilineEditMaxLines: 10,     // 編集で伸びる箱の最大行数(既定10・超えたら箱内スクロール)
  columns: [
    { data: 'task', title: '項目', width: 160 },
    { data: 'status', title: '状態', width: 110, type: 'dropdown', options: ['未着手','進行中','完了'] },
    { data: 'memo', title: 'メモ', width: 340, multiline: true },   // ← これだけ
  ],
  data: rows,
});