簡単にテーブルをカッコよくするjQueryプラグイン「Flexigrid」を使ってみた : アシアルブログ

2008/09/04 │カテゴリ： Tech　 JavaScript　 jQuery　 Flexigrid　

簡単にテーブルをカッコよくするjQueryプラグイン「Flexigrid」を使ってみた

松田惇│ コメント(0)│ トラックバック(0)

こんばんは。松田です。
ほんのちょっと手を入れるだけで、ただのテーブルレイアウトがかっこよくなってしまうjQueryプラグイン「Flexigrid」を使ってみました。
「Flexigrid」を使うと、カラムの表示/非表示機能、色分け、配置換え、リサイズなどいろんな機能を自動的に付けてくれます。

まずは普通にテーブルを作ってみます。
ソース

とてもシンプルでかっこわるいですね！
これをFlexigridを使ってかっこよくしてみます。

やることは３つ。
・headタグ内でスクリプトとCSSの読み込み
・テーブルにID（ここでは'flexigrid_table'）を指定
・スクリプト　$('#flexigrid_table').flexigrid();　の呼び出し
これだけです。

そして、Flexigrid化したテーブルが下のものになります。
ソース

すごくオサレになりましたね！

※IE7ではthにwidth属性をつけなければ動作しないようです。

さらにこのFlexigrid、オプションの指定をすればさらに高機能になります。
JSONからデータを読み込んだり、Ajaxを使ったページャーなども簡単に組めてしまうようです。
次の機会があればこのへんの機能を使ってみたいと思います。

テンプレートデザインに縛られることの無い管理画面などにはとても使いやすそうですね。
ぜひみなさんも使ってみてはいかがでしょうか。

** 参考リンク
わずか数行で"ものすごいテーブル"に! - jQueryプラグイン「Flexigrid」- マイコミジャーナル