Flexigridを使ってみた。 - futureを生きろ！

Tableを簡単にかっこいいグリッドにしてくれるjQuery プラグインを見つけたので試してみました。
わずか数行で"ものすごいテーブル"に! - jQueryプラグイン「Flexigrid」 - マイコミジャーナル

プラグインのダウンロード等

・Google Codeからflexigrid.zipをダウンロード
・展開したフォルダからflexigrid.js(圧縮版はflexigrid.pack.js)と\css\flexigrid配下のflexigrid.cssとimagesフォルダを任意の場所にコピー
僕はRailsで使いたかったので、以下のように配置
展開フォルダ\flexigrid.js　→　RAILS_ROOT\public\javascripts
展開フォルダ\css\flexigrid配下全て　→　RAILS_ROOT\public\stylesheets
なお展開フォルダ\css\imagesに[開く],[閉じる]アイコンが入っていますが、今回は未使用なのでコピーしていません。
※prototype.jsと共存させる場合はFlexigridをprototype.jsと一緒に使う方法 - 電脳戦士ハラキリ -SE道とは死ぬ事と見つけたりを参考に、hideプロパティを置換します。

使い方など

・オプション一覧

jQueryのFlexigridを使ってみた

・オプション設定例

jQueryのFlexigridを使ってみた(2) データ成形編

選択された行を取得する。

Flexigridのデフォルト設定ではTableの各行をクリックすると、その行が水色になります。
これはクリックされたtr要素にtrSelectedというclassを設定しているからです。
（もう一度クリックされた場合はclass属性を削除する）
なので、今選択されている（水色の）行を取得するにはtrSelectedをキーにセレクタを書けばいいです。
jQueryだとこんな感じ。

  $(function() {
    $('#hoge tr').click(function(){
      $('.trSelected').each(function(){
        alert($(this).text());
      })
    });
  });

ちなみにデフォルトでは、偶数行には'erow'というclassも設定されますので、

if ( $(this).attr("class") == 'trSelected' )

みたいに書くと、正しく動作しません。（セレクタは大丈夫です。）

jQuery-UIにもグリッド入れてほしいです。