jqueryプラグインflexigridのカラム非表示

JavaScript Software

表示テーブルをソートしたりカラム幅を変更したりページ送りできたりするjqueryのプラグインflexigrid。

http://www.flexigrid.info/

xml, jsonデータをajaxでロードすることも可能だが、既存のhtmlにも適用可能。
既存htmlに使ってみて以下のようにしたかった場合の対処を記述しておく。

  1. 右寄せしたいが、td align="right"なんてしても右に寄ってくれない。
  2. 最初から非表示にしたい(xmlやjsonのajaxロードでは"colModel"プロパティで可能っぽい(http://www.flexigrid.info/ のExample3))
  3. テーブルのフォントサイズが小さい。
$(document).ready(function() {
        $('#searchresult').flexigrid({
                width : 'auto',
                height : 'auto'
                }).flexToggleCol(5, false).flexToggleCol(6, false);
        $('#searchresult td.right div').css('text-align', 'right');
        $('div.flexigrid').css('font-size', '90%');
});

とすると、

  1. カラムの左から6,7番目は最初は非表示になる。非表示カラムは、ヘッダをクリックして表示に変更可能。
  2. td class="right"としているところは右寄せになる。
  3. テーブルのフォントサイズはfont-size: 90%;に設定。これは、flexigrid/css/flexigrid/flexigrid.css の.flexigridのfont-sizeを変えればいいのだが、元ファイルを修正したくない場合にはこれでも可能。

となる。