HTMLテーブルをリッチに便利な機能を追加する「Grid」
GridはHTMLテーブルにソートやヘッダ固定、行選択と言った機能を追加するJavaScriptライブラリです。
業務システムを作っていると必ず発生するのがテーブルでの一覧表です。WebでExcelレベルのことは実現できませんが、リッチな表としてGridを使ってみるのは良さそうです。
デモです。
必要な場所だけチェックしてハイライトできます。
横スクロールしても左側の列はそのままです。
数値のオーダーも適切に動きます。
縦スクロールしてもヘッダー部はそのままです。
カラム幅の変更もできます。
GridはIE7以上、Google Chrome/Firefox/Safari/Operaに対応しています。jQueryやMootoolsと一緒に使うこともできます。機能はヘッダー、フッター、カラムの固定化やカラムのリサイズ、カラムのソート、行の選択などになります。データフォーマットはJSONの他、XMLを使うこともできます。
GridはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
この手のライブラリは様々にあります。選定基準としては自社のニーズに合っているかどうかが最優先で、ついで使い勝手が良いかどうかでしょう。どうしても複雑な機能を提供するだけに設定が多くなってしまうのですが、それでもシンプルに使えるものを選ぶのが良いでしょう。
ヘッダーや左側カラムの固定に加えてソート、検索によるフィルタリング、グルーピング、一括更新、カラムの並び替えなど色々なニーズがあります。全てを満たすのは困難と思われますが、より優れたライブラリを選定すれば担当者の業務負担は大きく軽減されるでしょう。