[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
以下のページでは save プロパティにPHPプログラムを指定することでデータ登録ができる説明をしました。
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データへ登録（save）
この場合は PHP プログラムにデータの変更された部分のみが $_GET['request']['changes'] に配列データとして格納されます。 渡された $_GET['request']['changes'] に従ってレコード毎に個別に変更カラムデータを再設定しています。
今回は $_GET['request']['changes'] の内容を1レコード全てのカラムデータとして渡すことで PHP では1レコードを一括で処理する様に変更します。
尚、最初の読込ファイルは以下の様に以前のものと同様です。
■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-2 url2</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-1.5.rc1.js"></script>
</head>
<body>
<div id="grid" style="width: 500px; height: 200px;"></div>
<button onclick="save();">save</button>
<script>
$(function () {
// id="grid" へのグリッド設定
$('#grid').w2grid({
name: 'grid',
method: 'GET',
columns: [
{ field: 'recid', caption: 'ID', size: '50px' },
{ field: 'fname', caption: 'First Name', size: '30%' , editable: { type: 'text' } },
{ field: 'lname', caption: 'Last Name' , size: '30%' , editable: { type: 'text' } },
{ field: 'email', caption: 'Email' , size: '40%' , editable: { type: 'text' } },
{ field: 'sdate', caption: 'Start Date', size: '100px' }
],
url: {
get: 'data-get.json',
save: 'saverow.php'
}
});
});
// 登録関数
function save() {
//レコード配列初期化
var rows = new Array();
//レコード分の処理
for(i = 0; i < w2ui["grid"].records.length; i++) {
//'recid' で1レコード取得
var rec = w2ui["grid"].get(w2ui["grid"].records[i]['recid']);
if (rec) {
//レコードが存在する場合
if (rec.w2ui) {
//「w2ui」が存在する場合
if (rec.w2ui.changes) {
//変更箇所が存在する場合、レコードデータに設定
$.extend(rec, rec.w2ui.changes);
//オブジェクト[rec.w2ui]の削除
delete rec.w2ui;
//配列に追加
rows.push(rec);
}
}
}
}
//[save]の機能を使って得点計算を起動(CallBack:onSave)
w2ui["grid"].request("save", { changerows : rows });
}
</script>
</body>
</html>
今回の HTML ファイルには登録用のボタンを設け、そのクリックイベント処理用の登録関数を作成しました。
この登録関数の処理は grid の get は1レコード分のデータを取得できますが w2ui プロパティ内の changes プロパティに変更カラム情報が入っています。 このプロパティが存在していれば、そのレコードは変更された証拠となります。 よってこの情報を取得したレコード情報のプロパティに上書きし、登録用レコード配列に追加します。
w2ui.changes プロパティですが今回の w2ui のバージョンが w2ui-1.5.rc1.js なのでこの様になりました。 （w2ui-1.4.js では w2ui.changes ではなく changes 直で良かったようですが）
最後に request メソッドで grid の[save]機能を呼出します。request メソッドの定義は以下の通りです。
request( cmd, [params, [url, [callBack]]]) <パラメータ> ・cmd ：string コマンド名("POST"または"GET")を指定します。 ・params ：object 送信する追加パラメータのオブジェクトを指定します。 ・url ：string リクエストURLを指定します。 ・callBack：function コールバック関数を指定します。
■saverow.php プログラム
<?php
// PHP 5.5.0 未満のため
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['cmd']) {
case 'save':
// 変更データ存在チェック
if (!isset($arrReq['changerows']) || count($arrReq['changerows']) == 0) {
break;
}
// recid列の配列(KEY:0からの連番)
$arrRecid = array_column($arrReq['changerows'], 'recid');
// 新規配列に元データと変更データから追加処理
$arrNew = array();
foreach ($arrData['records'] as $value) {
$i = array_search($value["recid"], $arrRecid);
if ($i === false) {
// 変更が無い場合
$arrNew['records'][] = $value;
} else {
// 変更が有った場合
$arrNew['records'][] = $arrReq['changerows'][$i];
}
}
$arrNew['records'] = array_values($arrNew['records']);
$arrNew['total'] = count($arrNew['records']);
// JSON文字列生成
$strJson = json_encode($arrNew, JSON_UNESCAPED_UNICODE);
// テキストファイル書込(data-get.json)
file_put_contents($strJsonFile , $strJson);
break;
}
?>
この PHP プログラムでは $_GET['request']['changerows'] で渡される変更レコードデータを、元のレコードデータとマージする様な処理を行います。
最初の HTML ファイルを実行し、以下の図の Save ボタンをクリックすると data-get.json が変更され、 ページの再読込を行うと変更した値になるはずです。
コメント