忍者ブログ

VB.NET-TIPS などプログラミングについて

VB.NETのTIPS(小技集)を中心に、Javascript、PHP その他のプログラミングについて少し役に立つ情報を発信します。いわゆる個人的な忘備録ですが、みなさんのお役に立てれば幸いです。

JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データへ登録(save)

前回は w2ui.grid の外部データを指示するプロパティである url ついて説明をしました。

JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データの取り込み(url)

今回は urlsave プロパティに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

コメント

コメントを書く