Skip to content

MS_GridHeaderFix

Jump to bottom
nishi_74322014 edited this page Aug 21, 2026 · 1 revision

Gridのヘッダ固定方法

概要

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

詳細

一般的？な方法

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

比較表まで合って便利。

余談：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属性を使用する。

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

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

HTML 上は、

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

となる。

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

移行メモ（誤字）: 移行元の「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を使用する。

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

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

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

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

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

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

jQGridを使用する。

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

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

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

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

このWikiは「Open棟梁Project」,「OSSコンソーシアム 開発基盤部会」によって運営されています。

NetDevInfraWiki

マイクロソフト系技術情報 Wiki
Open 棟梁 Wiki

（未着手）

開発基盤部会 Wiki

移行管理: DONE ／ TODO

Clone this wiki locally