jQuery のプラグインで
Flexigrid ってのがあります。
Rails 開発でちょくちょく使ってて便利なので、GridView に適用できないもんかなーと思ってやってみた。
まず、通常の GridView ではうまくいかない。
というのも、GridView は thead, tbody タグを生成しない。
これの解決策として
CSS Friendly Control Adapters を使用する、。
以前は VSI で配布されていたが、今はずいぶんとシンプルになっている模様。
まず、zip と dll をダウンロード
Web アプリケーションプロジェクトに zip 内の CSSFriendly/CSS と CSSFriendly/JavaScript を移植。（いらないかも）
参照設定にダウンロードした CSSFriendly.dll を追加。
App_Browsers ディレクトリを追加し、中に CSSFriendlyAdapters.browser を配置。
CSS Friendly Control Adapters の設定はこれで OK。
これで、thead, tbody が出力されるようになる。
次に Flexigrid の設定。
Flexigrid は jQueryのプラグインなので、jquery.js をダウンロードして JavaScript フォルダに配置。（軽量版の jquery.pack.js をリネームした）
次に flexigrid.js を JavaScript フォルダに配置。
CSS ディレクトリに flexigrid.css および images ディレクトリを配置。
これで Flexigrid の設定も完了。
これで $(#GridView1).flexigrid() でよいかといえばそうはいかない。
若干の追加処理が必要になる。
まず、CSS Friendly Control Adapters を使用した場合、コントロールの id は table ではなく、それを取り囲む div タグに設定される。
flexigrid メソッドは table のオブジェクトから呼び出す必要があるため $() の引数を #GridView1 table としてやる。
(追記：$(#GridView1).flexigrid() でもできました。正式に table から呼び出す方が無難とは思われますが。
次にヘッダの width。
CSS Friendly Control Adapters を使用すると、各列の HeaderStyle の出力がされない。
ちなみに HeaderStyle の CssClass も設定されない。ヘッダなのに ItemStyle の CssClass の反映がなされる。
まあ、どっちにしても Flexigrid に必要なのは width 属性であり、style="width:100px" などしても反映されないのではあるが。
なので、下記のようにしてヘッダの各セルに width を設定してやる必要がある。
別に HeaderStyle から持ってこなくてもいいのだが、ヘッダの設定なので HeaderStyle に仕込んでおくのが筋だろうと思うので。
デザイナで設定できますしね。
これで $(#GridView1 table).flexigrid() で Flexigrid を適応できる。
Flexigrid には Ajax による非同期のページングやソートなども組み込まれているため、GridView に対するその部分のコーディングを簡略化できるかも。
XML か JSON を返す別の aspx なりが必要になりますが。
もともと GridView の機能である、インプレース編集などがうまくマッチできるかどうかはまだ試してません。
ここがうまく統合できるならかなり強力だと思うんだけどなぁ・・・
ぼちぼち試してみる予定です。
# まともな技術系エントリはかなり久々な気がする(;-_-)