jQueryで簡単にHTMLのテーブルを豪華にする方法

Flexigridというのがあるみたい。
http://www.flexigrid.info/
検索すると結構でてくるね。
http://journal.mycom.co.jp/articles/2008/06/25/flexigrid/index.html
使い方は超簡単。詳細は上のサイトを参照してもらうとして、通常のHTMLのみでかかれたテーブルにidをつけて以下のようにflexigridを適用するだけ。

$('#id_table').flexigrid();

すると、デコラティブなテーブルに早変わり。
テーブル内のデータをサーバからリクエストして反映させることもできる。↓
http://journal.mycom.co.jp/articles/2008/06/25/flexigrid/002.html
ここではJSONを使ってテーブルに表示するデータを取得している。JSONは以下のような形式。

{
	page: 1,
	total: 300,
	rows: [
		{id: 'A1', cell: ['1', '東京', '千代田区']},
		{id: 'A2', cell: ['1', '東京', '千代田区']},
		{id: 'A3', cell: ['1', '東京', '太田区']},
		{id: 'A4', cell: ['1', '東京', '世田谷区']},
		{id: 'A5', cell: ['1', '東京', '千代田区']},
		{id: 'A6', cell: ['1', '東京', '千代田区']},
		{id: 'A7', cell: ['1', '東京', '千代田区']},
		{id: 'A8', cell: ['1', '東京', '千代田区']},
		{id: 'A9', cell: ['1', '東京', '千代田区']}
	]
}

トップレベルにはpageとtotalとrowsがある。rowsの中にはテーブルに表示する各行が一つずつ配列の一要素として表現されている。ここで、idには一意なものを指定するのだと思う。idに数値を指定するとなぜだかうまく行かなかった。うーん。。
明日やること。

  • 行を選択した時のイベントを取得できるか
  • slideDown, slideUpで行を表示するようにできるか(途中まではできてる)
  • Flexigridのマニュアルを探す。(どこにあるんだ)

FlexigridはExt.jsのグリッドと同じような感覚で作ることができる。colModelとかの書き方、どっちかが参考にしたのか?って感じ。
しかし、参照系だったらこっちのほうがシンプルでいいかも。ちゃちゃっとできるよ。
明日やることの2つ目って結構使えるシチュエーションあるような気もするけど。みんないらないのかな。いや、うざいといえば、うざいが・・・。