※ 画像は公式サイトデモより

業務システムのみならず、メールや一覧の機能で必要になるのがテーブルを使った一覧機能だ。このとき、比較元になるのがエクセルをはじめとした表計算ソフトウェアだろう。あのレベルのUIをWebベースで再現するのはほぼ不可能とさえ言えそうだ。

ピクチャ 58.png

ドラッグアンドドロップによるカラムの並べ替えや表示/非表示の切り替えが可能

 

無理矢理カスタマイズして膨大に工数を増やすのではなく、ライブラリを使って柔軟に、素早く対応しよう。

今回紹介するオープンソース・ソフトウェアはFlexigrid、jQueryを使ったテーブル操作ライブラリだ。

Flexigridは既存のテーブルに対して利用できるライブラリで、普通のテーブルをカラムの並べ替えや表示/非表示、幅の変更など優れたUIをもったテーブルに変更してくれる。対応ブラウザはIE6/IE7、Firefox 2、Opera 9.x、Safari 3.0においてテストされており、Firefox3でも動作するなど幅広く対応している。

ピクチャ 35.png

JSONを使ってデータベース内のデータを表示する例

 

JSONでのデータ受け渡しにも対応し、サーバとのデータのやり取りに利用することでAjaxのようにデータを表示することができる。データの追加や削除、フィルタリング的な検索機能、ページ遷移など様々な機能を盛り込むことができる。

ここまでできれば、通常の一覧表の操作は十分なのではないだろうか。恐らく足らないものがあるとすれば、編集機能くらいだと思われるが、それは今後の計画に盛り込まれている。さらなるパワーアップを期待したいソフトウェアだ。

 

Flexigrid

 http://www.webplicity.net/flexigrid/