• 戻る（Grid）
  • Gridのヘッダ固定方法
  • GridViewとjQGrid

業務アプリの要件で多い、Grid のヘッダ固定方法について纏めました。

コチラが参考になります。

• スクロールテーブルを実装する際の注意点
  http://defghi1977-onblog.blogspot.jp/2012/02/blog-post_09.html
  1. テーブル分割法
  2. pushpin header法
  3. display:block法
  4. freezing法
  5. tbody-float法（NEW）
  6. element関数法（NEW）

比較表まで合って便利。

余談：freezing 法は IE 固有機能のため、最近は使用しないようです。

補足（今は CSS だけで解決できる）: 本節が列挙する 6 手法は、
いずれも CSS に固定手段がなかった時代の回避策である。
現在は標準の CSS 一行で済む。

【position: sticky】★
   2017年頃から主要ブラウザが対応。
   IE 以外の【全ブラウザで利用可能】

     thead th {
       position: sticky;
       top: 0;            /* スクロール コンテナの上端で止まる */
       z-index: 1;        /* セルの上に重ねる */
       background: #fff;  /* 【必須】★ 透明だと下が透ける */
     }

   → 上記 6 手法は【すべて不要になった】
   → IE 11 のサポートも 2022年6月に終了しており、
     互換のための回避策を残す理由はない ★

【sticky が効かないときの典型原因】★
 ① 祖先要素に【overflow: hidden / auto / scroll】がある
     → sticky はその祖先を基準にしてしまう
     → スクロールさせたい要素以外で overflow を切らない
 ② 【top / left 等のオフセットを指定していない】
     → position: sticky だけでは何も起きない
 ③ 【背景色を指定していない】
     → 見た目上、下の行が透けて「効いていない」ように見える
 ④ table に border-collapse: collapse を使うと
     【罫線が一緒にスクロールしてしまう】
     → border-collapse: separate + box-shadow で代替する

【列も固定したい（左端の項目名を残す）】
     tbody th { position: sticky; left: 0; }
   → 行・列の両方を固定すると、
     交差するセルは top と left の両方を指定する ★

上記の方法でも良いと思いますが、代替案を２つほど提案しておきます。

ReadOnly=True の TextBox を使用することで、Grid の幅が可変にならずに済みます。

これにより、必ず、テキストボックスの幅で収まります。

HTML 上は、

<input name="b" type="text" value="hoge" readonly="readonly" />

となる。

Enable=False ではないので注意。

• 小粋空間 input 要素の disabled 属性と readonly 属性の違い
  http://www.koikikukan.com/archives/2009/04/26-003300.php

移行メモ（誤字）: 移行元の「Grid の幅が可変にならずに住みます」を
「済みます」に修正した。

補足（readonly と disabled の違い）: 参考リンクの要点を
本文に取り込んでおく。業務アプリで頻繁に効いてくる差である。

	readonly	disabled
編集	できない	できない
フォーカス	当たる ★	当たらない
Tab 移動	対象になる	対象外
テキスト選択・コピー	できる ★	できない（ブラウザ依存）
POST される	される ★	されない ★
適用できる要素	input / textarea のみ	ほぼ全ての入力要素
見た目	通常と同じ（要 CSS）	灰色になる

【最重要の差】★
   disabled は【サーバに値が送られない】
     → 「表示はするが変更させたくない、
       でも値は受け取りたい」場合は
       【readonly】を使う
     → disabled を使うなら hidden で値を別送する必要がある

【ASP.NET Web Forms での注意】
   ・TextBox.ReadOnly = true
       → .NET Framework 3.5 以前は
         【ポストバックで値が反映されなかった】
         （ViewState の値で上書きされる仕様）
       → 4.0 以降は改善されている
   ・TextBox.Enabled = false
       → disabled 属性が出力され、値は送られない ★

   → 原文の「Enable=False ではないので注意」は
     この点を指している

【セキュリティ上の注意】★
   readonly も disabled も【クライアント側の制約に過ぎない】
     → 開発者ツールで簡単に外せる
     → 【サーバ側で必ず再検証する】こと

• jQueryでテーブルのヘッダーを固定する « Hello My World
  http://plmin.us/blog/2012/09/13/table-heade-fixed-jquery/

やり方が沢山あって、絞るのが難しそうです。

• JavaScriptのGridライブラリ決定版 - SlickGrid - Qiita
  http://qiita.com/icoxfog417/items/98e34c0555991033afec

Grid ライブラリも沢山あって、絞るのが難しそうです。

補足（Grid ライブラリの現在）: 「絞るのが難しい」状況は
今も変わらないが、選択肢の顔ぶれは入れ替わった。

【フレームワーク非依存】
   ・AG Grid ★  … 事実上の業界標準。無償版でも高機能
                   仮想スクロール、列固定、グループ化、
                   Excel エクスポート（有償）
   ・Handsontable … Excel ライクな編集。商用は有償
   ・Tabulator   … 軽量。設定だけで大半が済む
   ・SlickGrid   … 原文が挙げた大量データ向けの古豪。
                   現在は 6pac/SlickGrid が保守を継承

【フレームワーク統合型】
   ・MUI DataGrid（React）
   ・PrimeNG / PrimeReact の Table
   ・Vuetify の v-data-table

【選定の軸】★
 ① 【件数】 … 1万行を超えるなら【仮想スクロール必須】
 ② 【編集の有無】 … 編集ありは実装コストが跳ね上がる
 ③ 【ライセンス】 … 商用利用の可否を必ず確認する ★
 ④ 【日本語入力】 … IME 確定中のイベント処理で
                    不具合が出るライブラリがある

jqGrid も問題が多いようです。

• jqGrid4.3.1の新機能（Group Header, Frozen Cols）を試す、
  そしてハマりどころ解説 - Taste of Tech Topics
  http://acro-engineer.hatenablog.com/entry/20120108/1326046564

• jqGrid と ASP.NET との組合わせ実装方法はコチラが参考になる。
  https://github.com/SymphonyTeleca/SampleProgram/tree/master/ASPNET/WebForm/jqGridandWCF

また、次バージョンからライセンスが
MIT から「CC BY-NC（表示-非営利）」に変更され、
商用利用ができなくなるという情報があります。

• jQuery Grid Plugin – jqGrid » jqGrid is now Guriddo
  http://www.trirand.com/blog/?p=1438

  jqGrid JavaScript shall change its license from MIT/GPL 2 to
  Creative Commons Attribution-NonCommercial 3.0 License.

補足（ライセンス変更はその後どうなったか）: 本節の警告は
現実になったので、経緯を明確にしておく。

【jqGrid の分岐】★
 ① 【Guriddo jqGrid JS】（trirand 公式の後継）
     → 【商用は有償ライセンス】
     → 非商用は CC BY-NC
     → 原文が警告したとおりになった

 ② 【free-jqgrid】（Oleg Kiriljuk 氏のフォーク）★
     → ライセンス変更前の【MIT/GPL 版から分岐】
     → 商用利用可能
     → ただし【2019年頃から更新が止まっている】

 → 「jqGrid」で検索すると①と②が混在するため、
   【どちらのことを指しているか常に確認する】必要がある ★

【教訓としての一般化】
   OSS を業務システムに組み込む際は、
     ・【ライセンスが変更されうる】前提で選ぶ
       （単一ベンダ・単一開発者のプロジェクトは要注意）
     ・採用時点のライセンス条文を【記録に残す】
     ・依存を薄く保ち、差し替え可能にしておく
   本ページはその実例として今も価値がある ★

• 参考：GridViewとjQGrid

移行メモ（Tags の欠落）: 移行元にはページ末尾の Tags 行が
存在しないため、内容に基づき付与した。

Tags: 移行, .NET開発, その他、開発の色々