前回は w2ui.grid の外部データを指示するプロパティである url ついて説明をしました。
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データの取り込み（url）
今回は url の save プロパティにPHPプログラムを指定することでデータ登録ができる例を紹介したいと思います。
尚、最初の読込ファイルは以下の様に以前のものと同様です。
■JSON 形式のテストデータ(data-get.json)
{
records: [
{ recid: 1, fname: "John" , lname: "Doe" , email: "jdoe@gmail.com", sdate: "2020/03/01" },
{ recid: 2, fname: "Stuart" , lname: "Motzart", email: "smot@gmail.com", sdate: "2020/03/12" },
{ recid: 3, fname: "Jin" , lname: "Franson", email: "jgra@gmail.com", sdate: "2020/03/13" },
{ recid: 4, fname: "Susan" , lname: "Ottie" , email: "sott@gmail.com", sdate: "2020/03/24" },
{ recid: 5, fname: "Kelly" , lname: "Silver" , email: "ksil@gmail.com", sdate: "2020/03/25" },
{ recid: 6, fname: "Francis", lname: "Gatos" , email: "fgat@gmail.com", sdate: "2020/03/26" },
{ recid: 7, fname: "Mark" , lname: "Welldo" , email: "mwel@gmail.com", sdate: "2020/03/27" },
{ recid: 8, fname: "Thomas" , lname: "Bahh" , email: "tbah@gmail.com", sdate: "2020/03/28" }
]
}
それでは records 部分を url にて JSON ファイルを指定したソースを示します。
■url プロパティによる JSON ファイルを指定について
<!DOCTYPE html>
<html>
<head>
<title>w2ui Grid-3</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui.min.css" />
<script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./dist/w2ui.js"></script>
</head>
<body>
<div id="grid" style="width: 500px; height: 200px;"></div>
<script>
$(function () {
// id="grid" へのグリッド設定
$('#grid').w2grid({
name: 'grid',
method: 'GET',
columns: [
{ field: 'fname', caption: 'First Name', size: '30%' },
{ field: 'lname', caption: 'Last Name' , size: '30%' },
{ field: 'email', caption: 'Email' , size: '40%' },
{ field: 'sdate', caption: 'Start Date', size: '100px' }
],
url: {
get: 'data-get.json',
remove: 'save.php',
save: 'save.php'
}
});
});
</script>
</body>
</html>
■save.php プログラム
<?php
// PHP 5.5.0 未満のため「array_column」宣言
if (!function_exists('array_column')) {
// 「array_column」宣言
function array_column($arr, $strKey) {
$arrOut = array();
for ($i = 0; $i <= count($arr); $i++) {
if (isset($arr[$i][$strKey])) {
$arrOut[] = $arr[$i][$strKey];
}
}
return $arrOut;
}
}
// リクエスト取得
$arrReq = json_decode($_GET['request'], true);
$strJsonFile = 'data-get.json';
// 動作による処理
switch ($arrReq['action']) {
case 'save':
// 変更データ存在チェック
if (!isset($arrReq['changes'][0])){
break;
}
// データJSONファイル
$strJson = file_get_contents($strJsonFile);
$arrData = json_decode($strJson, true);
// recid列の配列(KEY:0からの連番)
$arrRecid = array_column($arrData["records"], "recid");
// 変更データ('changes')に従って処理
for ($i = 0; $i <= count($arrReq['changes']) - 1; $i++) {
$intRecid = -1;
// 'changes'内の1個のデータ処理
foreach ($arrReq['changes'][$i] as $key => $value) {
if ($key == "recid") {
$intRecid = $value; // "recid"の退避
continue;
}
if ($intRecid >= 0) {
// "recid"の存在するIndex検索
$intIdx = array_search($intRecid, $arrRecid);
// データ配列への書込
$arrData["records"][$intIdx][$key] = $value;
}
}
}
// JSON文字列生成
$strJson = json_encode($arrData, JSON_UNESCAPED_UNICODE);
// テキストファイル書込(data-get.json)
file_put_contents($strJsonFile , $strJson);
break;
}
?>
最初の HTML ファイルを実行し、以下の図の Save ボタンをクリックすると data-get.json が変更され、 ページの再読込を行うと変更した値になるはずです。
上記は Save 処理のみのプログラムですが remove 処理も含めると以下の様になります。 行を複数選択して Delete ボタンをクリックすると以下の様に "recid" が配列で複数渡されます。
Array
(
[request] => {"action":"delete","recid":[3,4]}
)
これを加味してソースを修正します。 ■save.php プログラム(削除処理も含む)
<?php
// PHP 5.5.0 未満のため「array_column」宣言
if (!function_exists('array_column')) {
// 「array_column」宣言
function array_column($arr, $strKey) {
$arrOut = array();
for ($i = 0; $i <= count($arr); $i++) {
if (isset($arr[$i][$strKey])) {
$arrOut[] = $arr[$i][$strKey];
}
}
return $arrOut;
}
}
// リクエスト取得
$arrReq = json_decode($_GET['request'], true);
$strJsonFile = 'data-get.json';
// データJSONファイル
$strJson = file_get_contents($strJsonFile);
$arrData = json_decode($strJson, true);
// 動作による処理
switch ($arrReq['action']) {
case 'save':
// 変更データ存在チェック
if (!isset($arrReq['changes'][0])){
break;
}
// recid列の配列(KEY:0からの連番)
$arrRecid = array_column($arrData["records"], "recid");
// 変更データ('changes')に従って処理
for ($i = 0; $i <= count($arrReq['changes']) - 1; $i++) {
$intRecid = -1;
// 'changes'内の1個のデータ処理
foreach ($arrReq['changes'][$i] as $key => $value) {
if ($key == "recid") {
$intRecid = $value; // "recid"の退避
continue;
}
if ($intRecid >= 0) {
// "recid"の存在するIndex検索
$intIdx = array_search($intRecid, $arrRecid);
// データ配列への書込
$arrData["records"][$intIdx][$key] = $value;
}
}
}
// JSON文字列生成
$strJson = json_encode($arrData, JSON_UNESCAPED_UNICODE);
// テキストファイル書込(data-get.json)
file_put_contents($strJsonFile , $strJson);
break;
case 'delete': // [request] => {"action":"delete","recid":[3,4]}
// recid列の配列(KEY:0からの連番)
$arrRecid = array_column($arrData["records"], "recid");
foreach ($arrReq['recid'] as $value) {
// "recid"の存在するIndex検索
$intIdx = array_search($value, $arrRecid);
// データ配列削除
unset($arrData["records"][$intIdx]);
}
$arrData["records"] = array_values($arrData["records"]);
$arrData["total"] = count($arrData["records"]);
// JSON文字列生成
$strJson = json_encode($arrData, JSON_UNESCAPED_UNICODE);
// テキストファイル書込(data-get.json)
file_put_contents($strJsonFile , $strJson);
break;
}
?>
今回はテキストファイルに対する登録、削除処理でしたが、実際にはデータベースに対しての処理になると思います。
PR
コメント