Tabulatorのドキュメントを見てレコード削除の処理を作ってみました。
< コード例 >
カラムスの左端にチェックボックスの列を配置
"rowSelection",
hozAlign: "center", headerSort: false,
cellClick: function (e, cell) {
cell.getRow().toggleSelect()
}
},
タイトル行に+アイコンと-アイコンを配置
// タイトル行HTML 編集ボタン //
const TITLE_HTML = `${userGroup} Booked flight records X <span id="reccnt"></span>
<span id="savearow" class="float-right mr-2 curpo tippyspan editbutton dsp_none"
data-toggle="tooltip" data-placement="bottom"
title="Save a row">
<img src="Img/save_64_darkgray.png" width="20"/>
</span>
<span id="cancelarow" class="float-right mr-2 curpo tippyspan editbutton dsp_none"
data-toggle="tooltip" data-placement="bottom"
title="Cancel edit">
<img src="Img/batsubutton_64_darkgray.png" width="20"/>
</span>
<span id="addarow" class="float-right mr-2 curpo editbutton tippyspan"
data-toggle="tooltip" data-placement="bottom"
title="Add a row">
<i class="fa fa-plus"></i></span>
<span id="delarow" class="float-right mr-2 curpo editbutton tippyspan"
data-toggle="tooltip" data-placement="bottom"
title="Delete a row">
<i class="fa fa-minus"></i>
`
let isAddingNow = false
// 列 //
let COLUMNS = [
{
// テーブルタイトル //
field: "",
title: TITLE_HTML,
columns: [
// == 以下省略 == //
削除処理
サーバーで削除後、即検索してテーブルを更新してますので、実はTabulatorでの行削除はありません。
// @@ テーブルタイトル右側 -アイコンを押した時 @@ //
$(document).on("click", "#delarow", function (e) {
//alert ("minus button clicked")
// チェックを入れてる行 //
const selectedData = table.getSelectedData()
console.log(selectedData)
// チェックを入れてる行のテーブルID //
const delIds = []
selectedData.forEach((row) => {
delIds.push(row.ID_BOOK)
})
// チェックしてる行がある場合 //
if (delIds.length > 0) {
// ここに確認を入れる //
$("#modal_delcfg_body").text("Are you sure you want to delete ??")
// 削除確認 //
$("#modal_delcfg").modal("show")
$(".delexec").off("click")
// @@ OKボタンを押した時 @@ //
$(".delexec").on("click", function (e) {
// -C 削除実行 //
const djax = new MyAjax("update/DeleteBookRecordsByIds.php", {ids: delIds + ""})
const dres = djax.exec()
if (dres["result"] === "Success") {
// 処理結果通知 //
const msg = `${dres["affected"]} records(s) was deleted.`
toastr.success(msg)
// テーブル更新 //
// 検索ボタンクリックを発生 //
$("#search_button").trigger("click")
}
else {
toastr.error("Update error occured !!")
}
})
}
else {
toastr.warning("No row selected. Nothing will be done.")
}
})
サーバー側
<?php /** * aviation BookedList マルチ行データ削除 * DeleteBookRecordsByIds.php * * 2023-01-06 tanulator aviation用 * */ header("Access-Control-Allow-Origin:*"); header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept"); header("Content-type: application/json"); ini_set('default_charset', 'UTF-8'); ini_set('display_errors', 0); //ini_set("memory_limit", "200M"); ini_set("memory_limit", "-1"); date_default_timezone_set('Asia/Tokyo'); /* * **************************************************** */ $SQL = <<<EOM DELETE FROM h_book WHERE ID IN (##IDS##) EOM; // == リクエストパラメータ == // $ids = $_POST["ids"] ? $_POST["ids"] : $_GET["ids"]; $res = array(); try { // 接続定義 // $connect_db = "mysql:dbname=aviation;host=localhost;charset=utf8;"; $connect_user = '??????'; $connect_passwd = '??????????'; //データベース接続 // $dbh = new PDO( $connect_db, $connect_user, $connect_passwd ); $idstxt = str_replace(",", "','", $ids); $idstxt = "'" . $idstxt . "'"; $sql = str_replace("##IDS##", $idstxt, $SQL); //echo $sql; // 削除実行 // $delcnt = $dbh->exec($sql); $res["result"] = "Success"; $res["affected"] = $delcnt; } catch (PDOException $e) { //var_dump($e->getMessage()); $res["result"] = "Fail"; $res["affected"] = -1; } // 切断 $dbh = null; echo json_encode($res, JSON_NUMERIC_CHECK); ?>
< 画面例 >