Tabulator レコード削除

 

 

 

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);

?>

< 画面例 >

コメントを残す