w2ui.grid関連情報
このページのテスト環境には、Xserver(MySQL＆PHP)を使っています
このページの作成経緯、Xserver上で、w2uiのグリッドを使ってPHPを使ってMySQLと連動して実際に動くサンプルプログラムを作成してみました
セキュリティー的には、現状のPHPの実装は、甘いので参考程度に見て下さい
PHPのコードには、デバッグの痕跡が残っています。不必要な部分は取り除いて下さい
商品マスター作成方法
基本的な記述は、このページのHTMLソースを見て下さい
jquery(バージョンは2.1.3使用)とw2ui(バージョン1.5r使用)のcssとjsをFTPでサーバーの適当な場所に置く
htmlのヘッダに次の文(例)を記述する
<link rel="stylesheet" type="text/css" href="https://suzukia0129.xsrv.jp/js/w2ui-1.5.rc1.min.css" />
<script type="text/javascript" src="https://suzukia0129.xsrv.jp/js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="https://suzukia0129.xsrv.jp/js/w2ui-1.5.rc1.min.js"></script>
bodyの<div>タグに次の文(例)を記述する
<div id="grid" style="width: 100%; height: 600px;"></div>
scriptのタグの間に次の文(例)を記述する
$(function () {
//グリッド設定
$('#grid').w2grid({
name : 'mygrid',
header: '商品マスター',
url : 'w2uigrid.php',
show: {
header : true,
toolbar : true,
footer : true,
toolbarAdd : true,
toolbarDelete : true
},
columns: [
{ field: 'recid', caption: 'ID', size: '50px' },
{ field: 'name', caption: '商品名', size: '30%' },
{ field: 'price', caption: '価格', render: 'money', precision: 0, size: '30%' }
],
//追加を押した時
onAdd: function (event) {
editUser(0);
},
//行をダブルクリックした時
onDblClick: function(event) {
editUser(event.recid);
}
});
//入力フォーム設定
$().w2form({
name : 'shohin_edit',
url : 'w2uigrid.php',
data: $(this).serialize(),
dataType: 'json',
style : 'border: 0px; background-color: transparent;',
formHTML :
'<div class="w2ui-page page-0">'+
' <div class="w2ui-label">ID:</div>'+
' <div class="w2ui-field">'+
' <input name="recid" type="text" disabled="disabled" size="35"/>'+
' </div>'+
' <div class="w2ui-label">商品名:</div>'+
' <div class="w2ui-field">'+
' <input name="name" type="text" size="35"/>'+
' </div>'+
' <div class="w2ui-label">価格:</div>'+
' <div class="w2ui-field">'+
' <input name="price" type="text" size="35"/>'+
' </div>'+
'</div>'+
'<div class="w2ui-buttons">'+
' <input type="button" value="保存" name="save">'+
' <input type="button" value="キャンセル" name="cancel">'+
'</div>',
fields: [
{ name: 'recid', type: 'text' },
{ name: 'name', type: 'text', required: true },
{ name: 'price', type: 'money', required: true },
],
actions: {
"save": function () {
this.save(function (data) {
if (data.status == 'success') {
w2ui['mygrid'].reload();
$().w2popup('close');
}
// if error, it is already displayed by w2form
});
},
"cancel": function () {
$().w2popup('close');
},
}
});
});
//w2utils.locale('ja-jp.json'); のかわり
w2utils.locale({
"dateFormat" : "yyyy/mm/dd",
"timeFormat" : "h24",
"currency" : "^[\\$]?[-+]?[0-9]*[\\.]?[0-9]+$",
"currencyPrefix" : "￥",
"currencySuffix" : "",
"currencyPrecision": 0,
"groupSymbol" : ",",
"float" : "^[-]?[0-9]*[\\.]?[0-9]+$",
"shortmonths" : ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
"fullmonths" : ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
"shortdays" : ["月", "火", "水", "木", "金", "土", "日"],
"fulldays" : ["月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日", "日曜日"],
"phrases" : {
"Save": "閉じる",
"Hide": "隠す",
"Add New": "追加",
"Edit": "編集",
"Delete": "削除",
"Confirmation": "確認",
"Yes": "はい",
"No": "いいえ",
"Reload data in the list": "一覧を再表示します",
"Edit selected record": "選択した行を編集します",
"Required field": "入力必須項目です",
"Add new record": "新規に行を追加します",
"Delete selected records": "選択した設定を削除します",
"Are you sure you want to delete selected records?": "選択した行を削除します。よろしいですか？",
"All Fields": "商品名"
}
});
//入力項目のポップアップ表示
function editUser(recid) {
$().w2popup('open', {
title : (recid == 0 ? '商品の追加' : '商品の編集'),
body : '',
style : 'padding: 15px 0px 0px 0px',
width : 500,
height : 300,
onOpen : function (event) {
event.onComplete = function () {
w2ui['shohin_edit'].clear();
w2ui['shohin_edit'].recid = recid;
$('#w2ui-popup #shohin_edit').w2render('shohin_edit');
}
}
});
};
PHPのファイル記述方法(ここではw2uigrid.php)
<?php
ini_set("allow_url_fopen", true);
header("Content-type: application/json; charset=UTF-8");
// POSTメソッドでリクエストした値を取得
$json = file_get_contents('php://input');
$jsons = urldecode($json);
$str = mb_convert_encoding($jsons, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
//頭から８文字目以降を収納
$str2 = substr($str, 8);
//JSONデータデコード
$cs = json_decode($str2);
//コマンド取得
$cmd = $cs->cmd;
//recid取得
$recid = $cs->recid;
//レコードデータ取得
$recids = $cs->record->recid;
$name = $cs->record->name;
$price = $cs->record->price;
//ステータス
$res = Array();
$res['status'] = 'error';
$res['message'] = 'Command "'. $cmd .'" is not recognized.';
$res['postData']= $str2;
// データベース接続
// $host = localhostで動かなければipアドレスを記載
$host = 'mysql9999.xserver.jp';
// データベース名
$dbname = 'suzukia0129_test';
// ユーザー名
$dbuser = 'suzukia0129_testuser';
// パスワード
$dbpass = 'hogehoge';
// データベース接続クラスPDOのインスタンス$dbhを作成する
try {
$dbh = new PDO("mysql:host={$host};dbname={$dbname};charset=utf8mb4", $dbuser, $dbpass);
// PDOExceptionクラスのインスタンス$eからエラーメッセージを取得
} catch (PDOException $e) {
// 接続できなかったらvar_dumpの後に処理を終了する
var_dump($e->getMessage());
exit;
}
//コマンドで処理をわける
switch ($cmd) {
//データ取得処理
case 'get':
//$recidが０の時は、全データ取得
if ($recid == 0) {
//検索用文字列のチェック
if (is_array($cs->search)) {
//検索用文字列あり
$names = $cs->search[0]->value;
// リストデータ取得用SQL
// 値はバインドさせる
$sql = "SELECT recid, name, price FROM products WHERE name LIKE '%" . $names . "%' ORDER BY recid ";
// SQLをセット
$stmt = $dbh->prepare($sql);
// SQLを実行
$stmt->execute();
// あらかじめ配列$dataを作成する
// 受け取ったデータを配列に代入する
// 最終的にhtmlへ渡される
$data = array();
// fetchメソッドでSQLの結果を取得
// 定数をPDO::FETCH_ASSOC:に指定すると連想配列で結果を取得できる
// 取得したデータを$dataへ代入する
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
$data[] = array(
'recid' => $row['recid'],
'name' => $row['name'],
'price' => $row['price']
);
}
header("Content-Type: application/json;charset=utf-8");
echo json_encode($data);
//echo $names;
} else {
//検索用文字列なし
// リストデータ取得用SQL
// 値はバインドさせる
$sql = "SELECT recid, name, price FROM products ORDER BY recid ";
// SQLをセット
$stmt = $dbh->prepare($sql);
// SQLを実行
$stmt->execute();
// あらかじめ配列$dataを作成する
// 受け取ったデータを配列に代入する
// 最終的にhtmlへ渡される
$data = array();
// fetchメソッドでSQLの結果を取得
// 定数をPDO::FETCH_ASSOC:に指定すると連想配列で結果を取得できる
// 取得したデータを$dataへ代入する
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
$data[] = array(
'recid' => $row['recid'],
'name' => $row['name'],
'price' => $row['price']
);
}
header("Content-Type: application/json;charset=utf-8");
echo json_encode($data);
//echo json_encode($cs);
}
} else {
//編集する１データのみ取得する
//戻りJSON配列
$data = Array();
// １データ取得用SQL
$sql = "SELECT recid, name, price FROM products WHERE recid = " . $recid . " ORDER BY recid LIMIT 1 ";
// SQLをセット
$stmt = $dbh->prepare($sql);
// SQLを実行
$stmt->execute();
//ステータス項目
$data['status'] = 'success';
//データ項目
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
$data['record'] = array(
'recid' => $row['recid'],
'name' => $row['name'],
'price' => $row['price']
);
}
header("Content-Type: application/json;charset=utf-8");
echo json_encode($data);
}
//header("Content-Type: application/json;charset=utf-8");
//echo json_encode($cs);
break;
//データ削除処理
case 'delete':
//recidを取り出し
$recid2 = $cs->selected[0];
// １データ削除SQL
$sql = "DELETE FROM products WHERE recid = " . $recid2;
// SQLをセット
$stmt = $dbh->prepare($sql);
// SQLを実行
$stmt->execute();
$ress = Array();
$ress['status'] = 'success';
header("Content-Type: application/json;charset=utf-8");
echo json_encode($ress);
//echo json_encode($cs);
//echo $recid2;
break;
//追加、更新処理
case 'save':
if ($recid == 0) {
// データ追加用SQL
// 値はバインドさせる
$sql = "INSERT INTO products(name, price) VALUES(?, ?)";
// SQLをセット
$stmt = $dbh->prepare($sql);
// SQLを実行
$stmt->execute(array($name, $price));
$ress = Array();
$ress['status'] = 'success';
//$ress['message'] = '';
header("Content-Type: application/json;charset=utf-8");
echo json_encode($ress);
} else {
// データ追加用SQL
// 値はバインドさせる
$sql = "UPDATE products SET name = '" . $name . "', price = " . $price . " WHERE recid = " . $recid;
// SQLをセット
$stmt = $dbh->prepare($sql);
// SQLを実行
$stmt->execute();
$ress = Array();
$ress['status'] = 'success';
//$ress['message'] = '';
header("Content-Type: application/json;charset=utf-8");
echo json_encode($ress);
//header("Content-Type: application/json;charset=utf-8");
//echo json_encode($cs);
//echo $sql;
}
break;
//それ以外の時は、JSONデータをそのまま返す
default:
header("Content-Type: application/json;charset=utf-8");
echo json_encode($cs);
break;
}
?>
MySQLデータベースの設定
本来ならPHPを記述する前に設定しておくこと
データベース名 suzukia0129_test
テーブル名 products
項目 recid int 11 自動連番 主キー
項目 name varchar 255 NULL
項目 price int 11 NULL
サンプルプログラムのダウンロード(jquery.w2uiのフォルダ付き)
sample.zipをダウンロードする