プリザンターの一覧画面にボタンを追加し、ボタンをクリックしてレコードを削除する

はじめに

一覧画面からレコードを削除する時、デフォルトの一括削除ボタンをクリックすると確認ダイアログが表示されて面倒なので、レコードごとに削除ボタンをつけるという処理をサーバスクリプトで実装しました。また、追加したボタンをクリックすると削除処理が実行されるクライアントスクリプトも実装しましたので、この記事に記載します。

ソースコード

サーバスクリプト

try {
    // 「data-id="${model.ResultId}"」でボタンを表示する行を指定
    let html = `<button data-id="${model.ResultId}"class="button-icon my-row-button"data-icon="ui-icon-circle-triangle-e">削除</button>`;
    // 該当業のClassA列に「削除」ボタンを表示
    columns.ClassA.RawText = html;
} catch (ex) {
    context.Log(ex.stack);
}

クライアントスクリプト

try {
    // my-row-buttonがクリックされたときのイベント
    $(document).on('click', '.my-row-button', function (event) {
        // レコードのIDをコンソールに出力
        $p.apiDelete({
        id: $(this).data('id'),
        done: function (data) {
            location.reload();
        }
    });
        // 編集画面が開かないようにイベントの伝搬を停止
        event.stopImmediatePropagation();
    });
} catch (ex) {
    console.log(ex.stack)
}

さいごに

一覧画面で削除ボタンを表示し、削除ボタンがクリックされたらレコード単位で削除するという処理を実装できました。次は編集画面で削除ボタンがクリックされたらそのレコードを削除するという処理を実装しようと思っています。今回の実装では「確認ダイアログ」が表示されずに一発で削除されるという点が肝になります。