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

Webベースの業務システムを作っていると度々データを一覧で表示する機会があります。そんな中で度々あがってくるのが一覧の時点でデータ編集したいという要望です。

In place editのような仕組みを使って作り込んでも良いですが、専用の仕組みを使った方がユーザビリティ高くできるはずです。そこで使ってみたいのがjQuery editTableになります。

最初の表示です。適当にセルをクリックします。
最初の表示です。適当にセルをクリックします。

そうするとその場で編集可能になります。
そうするとその場で編集可能になります。

行の追加もできます。
行の追加もできます。

ポストすると各行ごとにデータが入ってくるのが分かります。
ポストすると各行ごとにデータが入ってくるのが分かります。

Ajaxの場合もJSONの配列で受け取れます。
Ajaxの場合もJSONの配列で受け取れます。

日付選択に際してカレンダーピッカーを使うこともできます。
日付選択に際してカレンダーピッカーを使うこともできます。

行の追加できる数を制限した場合。3行追加した時点でボタンが押せなくなります。
行の追加できる数を制限した場合。3行追加した時点でボタンが押せなくなります。

jQuery editTableの使い方は以下のようになります。

var mytable = $('#edittable').editTable({
    data: [['']],       // Fill the table with a js array (this is overridden by the textarea content if not empty)
    jsonData: false,    // Fill the table with json data (this will override data property)
    headerCols: false,  // Fix columns number and names (array of column names)
    maxRows: 999        // Max number of rows which can be added
});

データはJSONの配列を当てはめるだけです。後は行やカラムの追加含めて自由にできます。編集が終わったら保存ボタンを押したタイミングでサーバにデータをポストすれば良いわけです。

後は以下のようなメソッドが提供されています。

mytable.loadData(dataArray);    // 配列データの読み込み
mytable.loadJsonData(jsonData); // JSONデータの読み込み
mytable.getData();              // データの取り出し
mytable.getJsonData();          // JSONでのデータ取り出し
mytable.reset();                // リセット

使い方はシンプルなので後は既存の業務フローに合わせて自由に使えるでしょう。見た目は普通にラベルとして表記されているだけに見えるので、データの確認にもその場での編集にも使える便利なライブラリです。

jQuery editTableはjQuery/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

jQuery editTable

micc83/editTable

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2