月: 2023年1月

Tabulatorで集計行を配置してみました。
カラム設定の公式ドキュメントはこちら
Column Calcuculationのドキュメントはこちら

< コード例 >

カラムのプロパティのtopCalcで合計、平均、件数とかをセットします。

// 飛行中数 //
  {
    title: "Active",
    field: "active_count",
    width: 40,
    hozAlign: "right",
    topCalc: "sum",
    formatter: function (cell, formatterParams, onRendered) {
      //console.log(cell.getValue())

      if (cell.getValue() <= 0) {
        return ""
      }
      else {
        return cell.getValue()
      }
    }
  },
  {field: "id", visible: false}
]

< 画面例 >

件数列と合計列を上に配置

TabulatorでtickCrossのチェックボックスを使ってみました。

ドキュメントはこことここ。
ここでも教えて頂きました。

< コード例 >

状態が変化した時、即サーバーに送信して保存しています。

カラムの設定

// 通知設定チェック //
{
  title: "N",
  field: "IS_NOTIFY",
  width: 20,
  hozAlign: "center",
  formatter: "tickCross",
  editor: "tickCross", editorParams: {
    trueValue: 1,     // Onの値
    falseValue: 0,    // Offの値
    tristate: false,  // 中立状態なし
    indeterminateValue: "n/a",
    elementAttributes: {
      maxlength: "10", //set the maximum character length of the input element to 10 characters
    }
  },

  cellEdited: function (cell) {
    //cell - cell component
    
    
    // 追加中の場合、何もしない //
    if (isAddingNow) {
      return false
    }
    
    // データ列名 field //
    const fieldName = cell.getField()
    console.log("--- cell.getField()")
    console.log(fieldName)

    // cellの値 //
    const cellval = cell.getData()[fieldName]
    console.log("--- cellval")
    console.log(cellval)

    // テーブルのid //
    const tableId = cell.getData()["ID_BOOK"]

    // サーバーに送信して保存する 他の列と共通の関数を使う //
    const updtres = postACellData(fieldName, cellval, tableId)
    
    if (updtres === "Success") {
      toastr.success("Notify check was updated")
    }
    else {
      toastr.error("Update error occured !!")
    }

  },
},
      

サーバー送信共通処理

  /**
   * セルフィールド値更新
   * @param {type} fieldname
   * @param {type} value
   * @param {type} id
   * @returns {.ajax@call;exec.result|res.result}
   */
  const postACellData = (fieldname, value, id) => {
    
    console.log(fieldname, value, id)

    // -C セル値更新リクエスト
    const ajax = new MyAjax("update/UpdateABookField.php", {
      field: fieldname,
      value: value,
      id: id
    })
    const res = ajax.exec()
    return res["result"]

  }

サーバー側

<?php

/**
 * Tabulator セル値更新
 * UpdateABookField.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
UPDATE h_book
SET 
  ##FIELD## = :VALUE,
  TM_UPDT = CURRENT_TIMESTAMP      
WHERE ID = :ID
EOM;

// == リクエストパラメータ == //
$field = $_POST["field"] ? $_POST["field"] : $_GET["field"];
$value = $_POST["value"] ? $_POST["value"] : $_GET["value"];
$id = $_POST["id"] ? $_POST["id"] : $_GET["id"];

if (!$field) {
    $field = "DT_DEP"; 
}
if (!$value) {
    $value = "2023-01-01"; 
}
if (!$id) {
    $id = 296; 
}

$res = array();
try {

    // 接続定義 //
    $connect_db = "mysql:dbname=????????;host=localhost;charset=utf8;";
    $connect_user = '????????';
    $connect_passwd = '????????';

    //データベース接続 //
    $dbh = new PDO(
        $connect_db,
        $connect_user,
        $connect_passwd
    );

    $sql = str_replace("##FIELD##", $field, $SQL);
   

    // パラメータセット //
    $stmt = $dbh->prepare($sql);
    $stmt->bindvalue(':VALUE', $value, PDO::PARAM_STR);
    $stmt->bindvalue(':ID', $id, PDO::PARAM_INT);
    $stmt->execute();

    $res["result"] = "Success";

} catch (PDOException $e) {
    //var_dump($e->getMessage());
    $res["result"] = "Fail";
}

// 切断
$dbh = null;

echo json_encode($res);

< 画面例 >

Tabulatorのドキュメントを読んでみると、JSONの他、CSVファイルもインポートしてテーブルのデータとして使えるので、試してみました。
列タイトル、カラムのフォーマットなどに拘らなければ少ない記述でかんたんに出来ることがわかりました。

< コード例 >

// HTML //
<div id="apidocs_body" class="card-body">
  <table id="usedata-table"></table>
</div>

// CSVファイル読込 自作jQueryラッパークラス //
const ajax = new MyAjax("document/DataSources.csv", {}, "text")
const csvData = ajax.exec()

// ++ Tabulatorで表示 ++ //
const table = new Tabulator("#usedata-table", {
  data: csvData,
  importFormat: "csv",
  autoColumns: true,
})

< データ例 >

種別,ソース,方法,サーバーPG,有料
AIRPORT メイン,Multi,MyAPI,PHP,
AIRPORT 滑走路,AeroDataBox,MyAPI,PHP,
AIRPORT ルート明細,AeroDataBox,MyAPI,Java,  *
"AIRPORT 地図 (空港, 滑走路)",国土交通省 MyData,MyAPI,Java,
AIRLINE メイン,Multi,MyAPI,PHP,
AIRLINE 機材別合計,Multi,MyAPI,Java,
AIRLINE 機材明細,Multi,MyAPI,PHP,
AIRLINE 機材登録履歴,AeroDataBox,Direct,,  *
AIRLINE 機材写真,PLANESPOTTERS,Direct,,
AIRLINE 地図 (機材カレント),AirLabs,Direct,,  *
AIRCRAFT メイン,Multi,MyAPI,PHP,
AIRCRAFT 検索項目,MyDB,,,
AIRCRAFT 機材指定オペレータ別機数,Multi,MyAPI,PHP,
AIRCRAFT 機材写真,PLANESPOTTERS,Direct,,
// == 以下省略 == //

< 画面例 >
何もセットしなければ、デフォルトで1行目をカラムヘッダーにしてくれます。