w2ui gridでjson書込のサンプルコードが無いぃぃ

w2ui json javascript

もうすぐ、新元号ななるから新元号対応しよう!
わざわざDBに入れるのもなんだかなぁ～!!
w2ui使ってるからjsonファイルだぁー!!
が、w2ui gridでjson書込のサンプルコードが無いぃぃ
ので書いてみた(´・ω・｀)
w2uiってあんまり使われて無いのかなぁ～

DB無しで、元号名称と開始年月日の編集できます。
JSでjson読んで配列にでも突っ込んで利用してくだされ！！

拙いコードですが参考になれば。。。

{"total":5,"records":[{"recid":"1","gengou":"明治","sdate":"1868\/01\/25"},{"recid":"2","gengou":"大正","sdate":"1912\/07\/30"},{"recid":"3","gengou":"昭和","sdate":"1926\/12\/25"},{"recid":"4","gengou":"平成","sdate":"1989\/01\/08"},{"recid":"5","gengou":"新元号","sdate":"2019\/05\/01"}]}

<!DOCTYPE html>
<html>
<head>
  <title>元号名称</title>
  <script src="libs/jquery/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="dist/w2ui.min.js"></script>
  <link rel="stylesheet" type="text/css" href="dist/w2ui.min.css" />
</head>
<body>

<div id="grid" style="width: 240px; height: 350px; overflow: hidden;"></div>

<script type="text/javascript">
$(function () {
  w2utils.locale('dist/locale/ja-jp.json');
  w2utils.settings.dateStartYear = 1868;  // start year for date-picker
  w2utils.settings.dateEndYear = Number(w2utils.formatDate((new Date()), 'yyyy'))+2;  // end year for date-picker

  $('#grid').w2grid({ 
    name: 'grid', 
    method: 'GET', // need this to avoid 412 error on Safari
    url  : {
      get : 'data/data.json',  //json読込
      remove : 'json.php',
      save : 'json.php'
    },
    show: { 
      toolbar : true,
      footer : true,
      toolbarColumns : false,
      toolbarSearch : false,
      toolbarInput : false,
      toolbarAdd : true,
      toolbarDelete : true,
      toolbarSave : true,
      searchAll : false
    },
    columns: [        
      { field: 'gengou', caption: '元号名称', size: '120px', sortable: true, editable: { type: 'text' } },
      { field: 'sdate', caption: '開始年月日', size: '120px', sortable: true, editable: { type: 'date' } }
    ],
    onAdd: function (event) {
      var len = w2ui['grid'].records.length;
      var g = 0;
      if(len != 0) g = Math.max.apply( null,w2ui['grid'].records.map(function(o){return o.recid;}) );  //max recid
      w2ui['grid'].add( { recid: g + 1, gengou: '元号名称', sdate: '' } );
    }
  });
});
</script>

</body>
</html>

サーバーのPHP

<?php
$_REQUEST = json_decode($_REQUEST['request'],true);

//jsonを配列に読込
$jsonUrl = "data/data.json"; //JSONファイルの場所とファイル名を記述
if(file_exists($jsonUrl)){
  $json = file_get_contents($jsonUrl);
  $obj = json_decode($json,true);
}else{
  $obj = array( "total"=>0, "records"=>array([]) );  //新規json用配列
}

switch ($_REQUEST['cmd']) {
  case 'save':
    if ( !isset($_REQUEST['changes'][0]) ){
      //form save処理
    }else{
      //grid save処理
      for ( $i=0; $i <= count($_REQUEST['changes'])-1; $i++ ){
          foreach ($_REQUEST['changes'][$i] as $k => $v) {
            if ($k == "recid") {$recid = $v; continue;}
            $array_recid = array_column($obj["records"], "recid");  //recid列
            $result = array_search($recid, $array_recid);  //recid検索
            $obj["records"][$result][$k] = $v;  //配列書込
          }
      }
      $obj["records"] = array_values($obj["records"]);  //indexを詰める
      $obj["total"]=count($obj["records"]);  //total書込
      $arr = json_encode($obj, JSON_UNESCAPED_UNICODE);  //json作成
      file_put_contents($jsonUrl , $arr);  //data file 書込

      $res = Array();
      $res['status']  = 'success';
      $res['message'] = 'save';
      $res['postData']= $_REQUEST;
      outputJSON($res);
    }
    break;
  case 'delete':
      for ( $i=0; $i <= count($_REQUEST['selected'])-1; $i++ ){
        $array_recid = array_column($obj["records"], "recid");  //recid列
        $result = array_search($_REQUEST['selected'][$i], $array_recid);  //recid検索
        unset($obj["records"][$result]);  //指定行削除
      }
      $obj["records"] = array_values($obj["records"]);  //indexを詰める
      $obj["total"]=count($obj["records"]);  //total書込
      $arr = json_encode($obj, JSON_UNESCAPED_UNICODE);  //json作成
      file_put_contents($jsonUrl , $arr);  //data file 書込

      $res = Array();
      $res['status']  = 'success';
      $res['message'] = 'delete';
      $res['postData']= $_REQUEST;
      outputJSON($res);
    break;
  default:
    $res = Array();
    $res['status']  = 'error';
    $res['message'] = 'Command "'.$_REQUEST['cmd'].'" is not recognized.';
    $res['postData']= $_REQUEST;
    outputJSON($res);
    break;
}
//w2ui res
function outputJSON($data) {
  header("Content-Type: application/json;charset=utf-8");
  echo json_encode($data);
}