とまと あんらいぷ…

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

GitHub
スポンサードリンク

スポンサーサイト

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

スポンサードリンク

GridViewヘッダ固定・列固定 

GridViewで行ヘッダと列ヘッダの固定を実装したかったんだけど
悶絶・・・

有名どころは
FreezingCol でググルとすぐにでてくるCSSでの実装ですね。
IE限定(笑)

問題は行数が増えてくると、使い物にならないぐらい遅くなる。
IE8でも試してみたけど、たしかに動く・・・動くんだけど。微妙な動きが。
なんか、モコモコ動くんですね。
もう、CSSでの固定は見限った。だって動かないんだもん。

で、次に見つけたのがコレ
SuperTables
多分一番、使い勝手がいいと思うし、とてもとても
ディ・モールトよい。普段はコレを使えばいいと思うよ!

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

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

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


結局、JQueryでなんとかならんかと、お得意のGoogle先生に聞きました。
OTCHY.NET jquery.tablefix.js
http://www.otchy.net/javascript/tablefix/

もう大満足です。
ふぅ。

なんとか実装。完了!
しかし早いし、綺麗に動くなぁ・・・
とりあえず一安心です。

と、、思ったら、問題があったので追記!!!!!
-----------------------2011/03/08 追記---------------------
GridViewの場合、
固定する列にItemTemplate列をつくって
チェックボックスなどを配置・・・

サーバー側で
値をチェックしようとしたら。
チェックは付くくせに外れないwwwwwくっそ!!くっそ!

多分。。。Tableタグを4枚コピーして固定させてる列と、
実態が違うんだろうな・・・どうせ、クローンが見えてるだけなんだろ・・・
クライアント側でjavascriptにてチェックボックスのElementsを確認しても
ずーーーっと初期値のままだしな!!!!

でもなぜかattributeしたjsは反応する。。なぜだ!?
時間がない・・・調べてる時間もないw

というわけで(笑)


'JQueryの描画のせい?で正しく動かないCheckBoxを綺麗に動かすための処理を追加
Private Const _CheckBoxs_jsForChk As String = "document.getElementById('ctl00_ContentPlaceHolderBody_ChkSelectList_{0}').checked = !document.getElementById('ctl00_ContentPlaceHolderBody_ChkSelectList_{0}').checked;"

'GridViewの行作成での時にjs追加。
Dim chk As CheckBox = CType(gvw_List.Rows(i).Cells(1).FindControl("chk_Select"), CheckBox)
chk.Attributes.Add("onClick", String.Format(_CheckBoxs_jsForChk, i.ToString()))

リテラルの部分は適当にクライアントIDから取得したりして、動的に取ってね。

ChkSelectList_{0}
なんてやりかたで、やっつけ仕事すぎるんだけど

今回のこのクソみたいな対応の実装は
webページにCheckBoxListはっつけておいて、
Gridviewの行数だけ、CheckBoxListのカウントも増やして・・・・

Gridviewのチェックボックスクリック時にCheckBoxListのチェックを付けてうらで同期させてます。

サバ側でチェックボックスの値を見るときは。
Gridviewではなく、CheckBoxListの値を見ると・・・

ものすごい不本意だし、きちんとコメントでもうっておかないとメンテナンスが大変。

ただまぁ納期との関係上この作りでGOしました。

他にいい方法があればコメントお待ちしております

2012/12/10
jquery.tablefix.jsですが、行と列の固定を同時に行った場合に限り、描画に問題が発生しました。
そのため別途記事を追記しています。
【ASP】Tableタグの行列固定を行うプラグインサンプルコード集【jQuery】
▼この記事を読んだ方は、こんな記事も読んでいます。▼

スポンサードリンク

コメント

tablefixのtableタグのcloneの仕様ですが。。。

通常、HTMLのタグを一意に特定することを期待しているtableタグのidをそのまま4倍に増殖させています。

ということで、増殖させた3つの適宜変更してあげればこの問題の本質的な解決になるかも知れません。

idを適宜変更させてあげるパッチは書いたけど、GridViewとの組み合わせでテストしてないです。

  • 2012/07/18(水) 19:10:47 |
  • URL |
  • babydaemons #-
  • [ 編集 ]

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

babydaemons 様

コメントありがとうございます。
せっかく素晴らしいコードなのに、読み解く事が出来ず、見苦しい対応をとってしまいました。

ASPでは、確かサーバー側ではクライアントのタグidを以て値を認識しています。
クライアント側で、チェックボックスを内包したtableタグにtablefixを使ったところ、チェックボックスのON/OFFが正しく取得できない状態に釣られてサーバーサイドで問題となっていました。

複数ある同一idのtableの値がElementByIdで取れないという状態だったのなら、ブラウザによって挙動が変わるかもしれないということですね・・・(Javascriptエンジンの実装次第?)

もはや検証環境がなくなってしまったのですが、
「増殖させた3つの適宜変更してあげればこの問題の本質的な解決になるかも知れません。 」
おっしゃる通りの認識です。機会があれば試してみたいと思います。

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

  • 2012/07/31(火) 17:38:20 |
  • URL |
  • dalmore #z9jllgzo
  • [ 編集 ]

SuperTablesでやってみました。

はじめまして、私もASP.NET + Gridview縦横スクロール枠固定で放浪してこちらにたどり着きました。

SuperTablesとGridViewの親<div>タグですが、
$('#ctl00_cphBody_GridView1').parent("div").addClass("fakeContainer");
というようなことをすると、今のところ上手く行きました。

ASP.NETってしれっと何やってくれてるんだかよくわかりませんね。
Frameworkのバージョンが変わったら、また違うタグが生まれてるかもしれませんし・・・。

とりあえず大参考になりました。勝手に御礼申し上げます。

  • 2013/01/30(水) 17:03:46 |
  • URL |
  • くりゆき #-
  • [ 編集 ]

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

くりゆき様

はじめまして。参考になってよかったです。
当時相当悩みましたもので・・・
SuperTablesは確かにparentのdivにクラスを割り当てる事で期待する動作をすると思います。

しかし2012/12/10記載のリンク先にある通り、
GridViewにTemplate列を作って、その中にCheckBoxコントロールを配置するとサーバー側でうまく値が取得できない事例がありました。
その際には、SuperTablesの後継であるgrid.jsを利用してください。

ではでは、参考にしていただきありがとうございます。

  • 2013/01/31(木) 13:32:45 |
  • URL |
  • dalmore #HMoCo2c.
  • [ 編集 ]

コメントの投稿


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

トラックバック

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

FC2Ad

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