Grid.js(superTables後継)とjquery.tablefixでテーブルを固定

javascriptでテーブルのヘッダや左側の項目なんかを固定するライブラリはかなりたくさん出てます。

なかでも名前のインパクトからか、superTablesなんかは自分の中で有名です。

今回テーブルのヘッダと左側の項目を固定する仕事があったので、ちょっと調べて見ることに。

まずはsuperTables。

でもググっても公式ページが出てこない。どこからダウンロードすればいいんだ？？

と思ってたら今はGridというのに名前が変わってるんだそうです。

http://www.matts411.com/post/grid/

アップデートされてるのはいいですが、明らかに検索しにくい名前になってしまったのはちょっと残念です。

さっそく使ってみます。
grid.jsは内で読み込まないと動かないという現象で少しつまづきましたが、動作は問題ありません。
あとは要素をしっかりとで囲ってやるのを忘れずに。

それからひとつ問題が。rowspanやcolspanを使ってると表示がおかしくなります。
対応してないのかな、と思ってGridのページを見てみると、作者じきじきに「unfortunately not at the moment.」と言ってます。

残念ですが、rowspanやcolspanを使ってるとGridはうまく動かないようです。


続いて目をつけたのがjquery.tablefix。

http://www.otchy.net/javascript/tablefix/

作者は日本人。しかもrowspanとcolspanにも対応してるようで、作者ページのサンプルもrowspanとcolspanが使われてます。

よし、これで勝つる！と思ったのも束の間。実装してみると少しカラムがずれるという現象が発生。

どうやらrowspanやcolspanも、ちょっと複雑になると対応できないみたいです。
具体的にどこまでがセーフでどこからがアウトなのかはわかりませんが、自分のケースではズレてしまいました。


あとjquery.tablefixでは、テーブルの中にフォームが入ってると、そのフォームは機能しなくなります。

逆にGridのほうはフォームは有効だそうです。


というわけで今のところ解決してません。

とりあえず言えるのは、テーブルの構造はなるべくシンプルにしておいたほうが良い、ということでしょうか。

他のライブラリも含め、もう少し調べてみようと思います。


追記：
こちらのページがとても参考になります。
http://defghi1977-onblog.blogspot.jp/2012/02/blog-post_09.html