先日まで、主にリードオンリーのデータを扱ってましたが、編集、更新が必要なデータを扱う必要があってドキュメントを見ながら、作ってみました。
< コード例・日付 >
カラムの設定で、editorとcellEditedを記述
// 出発日 //
{
title: "Dep Date",
field: "DT_DEP",
width: 90,
hozAlign: "center", editor: "date", editorParams: {
mask: "yyyy-MM-dd", // ?????
min: "2023-01-01", // the minimum allowed value for the date picker
max: "2030-12-31", // the maximum allowed value for the date picker
format: "yyyy-MM-dd", // the format of the date value stored in the cell
elementAttributes: {
title: "slide bar to choose option" // custom tooltip
}
},
cellEdited: function (cell) {
//cell - cell component
// 追加の場合は何もしない //
if (isAddingNow) {
return false
}
const inpedData = cell.getData()
const inpedDataJSON = JSON.stringify(cell.getData())
// 行データ //
console.log("--- inpedDataJSON (row)")
console.log(inpedDataJSON)
// データ列名 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"]
//alert(inpedData + " に変わったよ\n" + inpedDataJSON)
// サーバーに送信して保存する 他の列でも編集があるので、関数で行う //
const updtres = postACellData(fieldName, cellval, tableId)
if (updtres === "Success") {
toastr.success("Date 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) => {
// -C セル値更新リクエスト
const ajax = new MyAjax("update/UpdateABookField.php", {
field: fieldname,
value: value,
id: id
})
const res = ajax.exec()
return res["result"]
}
サーバー側
<?php
/**
* aviation BookedList セル値更新
* 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
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;
}
/*echo $field."\n";
echo $value."\n";
echo $id."\n";*/
$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
);
$sql = str_replace("##FIELD##", $field, $SQL);
//echo $sql;
// パラメータセット //
$stmt = $dbh->prepare($sql);
//$stmt->bindvalue(':FIELD', $field, PDO::PARAM_STR);
$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);
?>
< 画面例 >
コメントを投稿するにはログインしてください。