OpenJSはテーブル表示をリッチなUIにし、並び替えや編集などの機能を追加するライブラリ。

OpenJSはjQuery/JavaScript製のオープンソース・ソフトウェア。企業システムはもちろん、Webサービスの管理画面などで求められるのがテーブルベースのデータ一覧表示機能だ。そしてテーブルを作るとソートやフィルタリング、その場での編集機能などが求められるようになる。


画像表示

そんな機能を作り込むのはとても大変だ。だがユーザの立場に立てば、一件ずつ編集するのも大変なことだろう。そこで外部ライブラリに頼ろう。OpenJSはとてもリッチな編集インタフェースを提供してくれる。

OpenJSは通常のテーブルタグで作られた表を、角丸でかなりリッチなUIにしてくれるライブラリだ。カラムで並び替えたり、画像のサムネイルを表示する、フィルタリングやページネーション機能もある。Ajaxでスムーズに操作させることもできる。


編集付き

マウスが当たっている行はハイライト表示されたり、その場での編集もできる。日付データについてはデートピッカーまで表示できる。テーマもあって様々な色から選択できる。検索は文字列やレンジでの絞り込みも可能で、かなり多機能だ。テーブルを使ったデータメンテナンス機能が必要になった時には是非一度見てほしい。

[s2If current_user_can(access_s2member_level1)]


ハイライト表示(プレミアム限定)

[/s2If]
[s2If current_user_can(access_s2member_level1)]


テーマによる色変更(プレミアム限定)

[/s2If]

MOONGIFTはこう見る

OpenJSはかなり優れたUIであるため、周囲もそれに合わせて作らないと浮いてしまう可能性がありそうだ。だがここまで高機能に様々なデータ表示を提供するものは多くないので、知っておいて損はないはずだ。この手のニーズはたびたび上がるので、一つよく慣れたものを作っておくのがお勧めだ。

業務システムではデザインの善し悪しよりも機能の堅牢性や確実性に軸が置かれるが、日々の作業者にとってはちょっとした使い勝手が作業の効率性に大きく関わってくる。スクラッチで開発するのは困難かもしれないが、OpenJSのようなライブラリを知っておくだけで開発工数は軽くなるのではないだろうか。

Welcome to Square Bracket