業務システムといえばテーブルによるデータの一覧表示ですよね。実装すると次に要望にあがるのはデータのフィルタリングであったり、一回更新だったりします。非常に厄介です。 今回はその一部、一覧時におけるデータの編集を手助けしてくれるソフトウェア、jQuery-Tableditを紹介します。Bootstrapのテーブルに対応しています。

jQuery-Tableditの使い方

jQuery-Tableditで表示したところです。右側に編集、削除のアイコンがあります。

クリックするとテキストボックスになって編集可能になりました。

編集完了すると赤くなります。これで編集した行がわかりやすくなります。

さらにダブルクリックしたセルだけを編集状態にすることもできます。

行全体ではなく、指定したセルだけを編集可能にもできます。

削除は確認が出ます。

jQuery-Tableditを使えば既存のBootstrapベースのシステムに手軽に一覧編集機能を追加できます。ステータスや商品名などはここで簡単に編集できるようになっているとユーザビリティが高くなるでしょう。

jQuery-TableditはjQuery/Bootstrap用のオープンソース・ソフトウェア(MIT License)です。

jQuery-Tabledit markcell/jquery-tabledit: Inline editor for HTML tables compatible with Bootstrap.