今回は w2ui.grid の外部データを指示するプロパティである url ついて説明をします。
最初の紹介ページでのデータ宣言している部分を外部ファイルとして読込ませます。
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理方法の紹介
ファイルは JSON 形式で記述します。上記のページの records プロパティの部分を JSON ファイルとして作成します。
ファイルの中身は以下の様になります。（records を { } で囲みます。尚、ファイルの文字コードは UTF-8 です。）
{
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-1</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',
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: 'data.json'
});
});
</script>
</body>
</html>
これを実行させると以下の様な表示になります。 （特に最初の紹介ページの表示と変わりはありません）
この url はグリッドが、リフレッシュ、検索、レコードのソートの各処理が行われた時にしていされた url で指定されたファイルからデータが取得されて表示されます。 データを保存する場合があれば、同じく url で指定されたファイルに登録されます。
更に、レコードの取得、削除、登録において別のファイル名などを指定する場合は url の内部プロパティである get , remove , save を指定します。
■url プロパティによるレコードの取得、削除、登録を指定
<!DOCTYPE html>
<html>
<head>
<title>w2ui Grid-1</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',
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: 'data-remove.json',
save: 'datas-save.json'
}
});
});
</script>
</body>
</html>
この方法で上手くいくかと思ったのですが、remove , save のところで json ファイル指定はできない様です。 以下のソースの様に PHP ファイルに制御を渡して、 $_GET['request'] の中を調べてデータ処理をすることになります。
<!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.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: 'recid', caption: 'ID', size: '50px' },
{ field: 'fname', caption: 'First Name', size: '30%' , editable: { type: 'text' } },
{ 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: 'remove.php',
save: 'save.php'
},
show : {
toolbar : true,
toolbarDelete : true,
toolbarSave : true,
searchAll : false
}
});
});
</script>
</body>
</html>
このソースを表示し、グリッドの Save ボタンをクリックすると変更個所の情報が PHP プログラムに送られます。
■save.php プログラム
<?php
$results = print_r($_GET, true);
file_put_contents("save.json", $results);
?>
■save.json ファイルの内容
Array
(
[request] => {"changes":[{"recid":3,"fname":"Jin111"},{"recid":4,"fname":"Susan222"}],"action":"save"}
)
変更の在った recid と 変更したカラム名とその値が送られてくるので、それを使って実際のデータを更新処理することになります。 グリッドの行を選択し Delete ボタンをクリックすると削除個所の情報が PHP プログラムに送られます。
■remove.php プログラム
<?php
$results = print_r($_GET, true);
file_put_contents("remove.json", $results);
?>
■remove.json ファイルの内容
Array
(
[request] => {"action":"delete","recid":[1]}
)
削除の在った recid が送られてくるので、それを使って実際のデータを削除処理することになります。 PR
コメント