ITエンジニア/デザイナ向けにオープンソースを毎日紹介

これは使い勝手良さそう!

Bootstrapの魅力はデザインがさくさく出来上がる使い勝手の良さもありますが、シェアが大きいので関連ライブラリがたくさん作られているということも挙げられます。本家にはない機能もちょっと探せば大抵あったりするものです。

表計算のように編集可能なテーブルを実現したい、そう思ったら使ってみたいのがeditableTableWidgetです。

editableTableWidgetのデモ

こんな感じになります。セルをクリックすると編集モードになります。
こんな感じになります。セルをクリックすると編集モードになります。

バリデーション機能付き。
バリデーション機能付き。

エラーメッセージも出せます。
エラーメッセージも出せます。

ちょっとしたことですが、編集後に一番下の行のサマリーも変わっています。計算処理も可能です。

editableTableWidgetの使い方

使い方は簡単で、以下のようなコードを実行します。

$('#table').editableTableWidget();

さらにバリデーションは以下のようになります。

$('table td').on('validate', function(evt, newValue) {
    if (....) { 
        return false; // mark cell as invalid 
    }
});

簡単ですね。さらに値が変わった場合のイベントもあります。

$('table td').on('change', function(evt, newValue) {
    // do something with the new cell value 
    if (....) { 
        return false; // reject change
    }
});

値をリアルタイムにチェックできるのは便利そうです。後は入力完了時にサーバに飛ばすようにすれば、スムーズな編集が実現できるでしょう。クリックによるセル選択の他、矢印キーによるフォーカス移動にも対応しています。

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

Tiny editable jQuery Bootstrap spreadsheet from MindMup

mindmup/editable-table

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2