Excel風一覧から一括の登録、更新、削除(登録編)

WEBでExcel風の一覧を再現するHandsontableを使って、一括更新、登録、削除機能を実装しました。長くなるのでまずは「一括登録編」です。

DB上のデータを一覧に表示するには、以前の記事で書いた通りですが、今回は、一覧にデータを作成してDBに保存する、またデータの削除を実装します。 サンプルを下記に示します。

なお、 後々「反映」ボタンでDB側にデータを渡したときのため、行には、CRUDのいずれかを示すステータスを持たせ、ユーザのアクションに応じてそれらを設定するようにしてあります。(※Readの場合は、要は何も更新がないのでサーバ側は何もしなくてよい。100件のデータを表示して、1件だけ更新がある場合を考えると、Rであることの識別も大変重要。)この点は練習ではあるものの、ある程度実務的に耐えられるようにと思っています。

行追加ボタンの実装

行追加ボタンは、押下すると一覧上に「空白の行」を生成します。下記は行追加を3回押した状態です。

行追加ボタンは、1画面だけではなく、アプリ全体でみると何度も作るであろうことから、拙いながらもmyライブラリにしました。 個別の画面側は1行の実装だけにしてあります。

$('#addBtn').addRowHot(hot, "status");

なお、「hot」はhandsontableのオブジェクトです。 1つ前の記事でもあったと思います。

var hot = new Handsontable(grid, {・・・

さて、では自作ライブラリ部分です。とはいえ、もちろん、行の追加処理の核心部分は、Handsontableの公式なAPIによるものです。核心部分とは、「hot.alter(‘insert_row’, r);」です。 しかし、これだけでは画面上の部品とは切り離されているので下記ようにライブラリ化した次第です。

第3引数に指定したファンクションがあれば、行追加後にそのファンクションを実行するようにしてあります。ない場合は、「Ins」という文字列をStatusとして設定するようにしてあります。

const INS = "Ins";
(function($) {
    'user strict';
:(中略)
    $.fn.addRowHot = function(hot, statusCol, func = undefined) {
        this.bind('click', function(e) {
            e.preventDefault();
            e.stopPropagation();

            var r = hot.countRows();
            hot.alter('insert_row', r);
            if (func === undefined) {
                defaultAddFunc(hot, r, statusCol);
            } else {
                func(hot, r);
            }
        });
        return this;
    }
:(中略)
    var defaultAddFunc = function(hot, insRow, statusCol) {
        hot.setDataAtRowProp(insRow, statusCol, INS);
    };
})(jQuery);