
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);
?>
< 画面例 >

