とまと あんらいぷ…

エンジニアの活動記録とかつぶやきとか

GitHub
スポンサードリンク

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

スポンサードリンク

【ASP】Tableタグの行(ヘッダ)列固定を行うプラグインサンプルコード集【jQuery】

tableタグのヘッダ行・列固定の解決方法


過去に書いた記事
GridViewヘッダ固定・列固定
の続きです。

サイト紹介と逃げの回避策だけを書いて数年間放置してました。
が・・・
「Gridview 固定」とかでググるとあまりにも上位に表示される自分の記事・・・

コメントも貰ったし、お粗末な状態で放置できないなぁと悩んだ結果
tableタグのヘッダと列固定を行う場合の解決方法を実装しておこうと考えました。

いくつか調べた結果、
tableタグの行列固定を行うにはスタイルシートかjQueryのプラグインが有名のようです。
今回は、jQueryを使ってお目当ての動きを実装しました。
jQueryのプラグインもいろいろあって、前回も2種類ほど書いてたのだけど
結果的には過去にはなかったプラグインで解決できました。


使ってみたプラグインは以下の3種類です。

・SuperTables
・jquery.tablefix.js
・Grid.js

SuperTables


前回紹介したプラグインです。
過去記事を読むと・・・


Gridviewをdivでくくってやってみたんだけど、行ヘッダが倍増したように表示される。
自分で手打ちで作ったタグにSuper Tablesを当てるとうまくいく。

・・・・またASPの仕様ですか。。。無言で空のdivを吐くなよ・・・「無言」あかん。
http://ap.atmarkit.co.jp/bbs/core/fdotnet/17568

なんとかTableのIDから親要素にスタイルを当てたりとか、
なんかしたりとかしてたんだけどどぉーもうまいこといかないし、
カスタムコントロールも面倒くさい。(え、技術がないだけですが・・・)

ひどい事書いてますね(笑)日本語もよく分からん・・・
ASP.NETでSystem.Web.UI.WebControls.GridViewを使った場合、divタグが吐き出される仕様があります。
SuperTablesは、対象となるtableタグをdivで囲み、そのdivの縦横のサイズを指定する事が前提です。
当時の私は、吐き出されたdivタグに対して幅の指定ができず撃沈しました。

プラグイン呼び出し前に、GridViewから吐き出されたdivタグに幅指定したclassを付ければ解決ですね。うん・・・



今回は、上記コードでプラグインの適応を行うことができたのですが、
このプラグインと、GridViweの列にTemplateFieldを作り、その中にCheckBoxコントロールを配置するという併用運用を行うと、CheckBoxコントロールの値を正しく取ることができませんでした。
idを正しく設定したりすると綺麗に動くとおもいますが、利用は諦めました。
というかバージョンが古いので、公開ソースコードがもうないです。

後述しますが既にバージョンアップがなされており
Grid.js
という名前に変わっています。

jquery.tablefix.js


前回の記事では、これで解決した!
的な事を書いてました。
むちゃくちゃな方法でしたけど・・・

このプラグインの実装は(SuperTablesもそうだけど)tableタグのcloneを作って、
必要な部分だけを表示させておくことで行列固定のスクロールを実現している仕様です。
したがってブラウザ上からはtableのidが重複してしまい正しい値が取得できないという問題と、
Ctrl+Fでサイト内検索をした時にコピーされた他のtableタグまで検索してしまう問題が潜んでいます。

前者は、tableをcloneした後、IDを適宜変更することで回避できます。

こんな感じで名前を変えてみたら、サーバー上でチェックボックスの内容を正しく取得することまでは確認できました。

が・・・
後者は解決できないし
改めて見てみると行と列を同時に固定した時に限り、右端までスクロールすると
ヘッダがずれてしまいました。
gridviewtablefix.png

ズレ幅は、ちょうどスクロールバーの幅なので、ヘッダスクロールとサイドのスクロール計算がうまくいってないのかなぁ・・・
解決できなかったので、利用を諦めました。

Grid.js(Matt's 411


この記事のメインであり、解決解です。
SuperTablesの後継であり、速度改善も行われてるようです。
html5にも対応してるようです。
おまけにdom(tableタグ)やらjsonにも対応してるという汎用っぷり。すごい・・・

前述の2つは、idの重複が発生しており、id検索による正しい値が取れないという問題が発生するけど
Grid.jsはどうもそういった事が見当たらないし、CheckBoxもきちんと動く。

ただし、注意点としてtableタグに適応したい場合はtheadタグとtbodyタグが必要ぽい。
GridViewでは、theadタグやらtbodyタグやらを出力する機能がデフォルトで有効ではない。

だからちょこっとだけ、プロパティを変更してあげる必要があります。

このコードにより、GridView コントロールは thead, 要素、tbody 要素、th 要素を生成するようです。
Page_Loadあたりに入れればよいかな。

SuperTablesと同じくGridViewに適応する場合は、空のdivに対して幅指定したクラスを適応してあげてください。


結果としては、お目当てと動きと、CheckBoxの動きも正常に動いてます。
gridviewgrid.png

まとめ


各種プラグインの呼び出しは以下のとおりです。



SuperTablesは古いし、jquery.tablefix.jsはスクロールがずれる時がある。
というわけで、Grid.jsにより実装完了です。

githubにソリューションごとアップしてるので
必要な方はどうぞ。
ASPNET_FixedHeaderAndColumnsGridviewSamples.git

時間がかかってしまったけど、なんとか〆れそうで一安心でした。
▼この記事を読んだ方は、こんな記事も読んでいます。▼

スポンサードリンク

テーマ:プログラミング - ジャンル:コンピュータ

コメント

使わせていただきました

FreezeCol→jquery.tablefix.jsで挫折したところ、このサイトに辿り着きました。
Grid.jsの使い方について有難く参考にさせていただきました。

一点だけ、.
GridView1.UseAccessibleHeader = true;
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
はPage_Loadに張り付けても、PostBack時にうまく動作しませんでした。
GridView1_PreRenderイベントに張り付けるとうまくいきましたことを添えさせていただきます。

本当に助かりました。ありがとうございます。

  • 2013/02/19(火) 19:38:22 |
  • URL |
  • #fiWm4Tng
  • [ 編集 ]

コメントありがとうございます。

お役に立ててよかったです!
いつの日か、htmlタグだけで実装できるようになるかもしれませんね(笑)

さてさて、プロパティ設定の指摘もいただき、ありがとうございます。

アップロードしているサンプル書リューションでは、tbodyタグを吐き出していたので
指摘の挙動について気づけてませんでした・・・(初期化されちゃうのかな?)
もしかして
if ( IsPostBack ) {
return;
}
と記載してるのが原因でうまくいっているのかもですねぇ・・・。

イベントの使い方談義になりますが・・・
M$サイトのページのライフサイクルを信じるならば

「PreRender イベントはページ上のコントロールごとに発生します。このイベントは、ページまたはコントロールのコンテンツに最終的な変更を加えるときに使用します。」
http://msdn.microsoft.com/ja-jp/library/ms178472(v=vs.80).aspx

とのことですので、もし常にtableの固定化を行なう場合は
「恒久的」な扱いとして、マークアップ時点でプロパティ設定しておくのがよさそうですね。

  • 2013/02/25(月) 09:33:00 |
  • URL |
  • 管理人 #z9jllgzo
  • [ 編集 ]

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://dalmore.blog7.fc2.com/tb.php/50-b3a602a6
この記事にトラックバックする(FC2ブログユーザー)

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。