[[Open棟梁Project>http://opentouryo.osscons.jp/]] - [[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]] * 目次 [#g17e796e] #contents *概要 [#sb20d9aa] 業務アプリの要件で多い、Gridのヘッダ固定方法について纏めました。 *一般的?な方法 [#o349b173] コチラが参考になります。 -スクロールテーブルを実装する際の注意点~ http://defghi1977-onblog.blogspot.jp/2012/02/blog-post_09.html ++テーブル分割法 ++pushpin header法 ++display:block法 ++freezing法 ++tbody-float法(NEW) ++element関数法(NEW) 比較表まで合って便利。 余談:freezing法はIE固有機能のため、最近は使用しないようです。 *その他の方法 [#i3d224fc] 上記の方法でも良いと思いますが、代替案を2つほど提案しておきます。 **readonly属性を使用する。 [#d2dabf5b] 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 **JQueryを使用する。 [#gf5d446b] -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ライブラリも沢山あって、絞るのが難しそうです。 ***jQGridを使用する。 [#v7bebf0a] 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.