前回、外部Jsonからw2uiのサイドツリーを読み込みできましたので、今回はPHPにて読み込みを行います。
前回の「w2uiサイドツリーを外部Jsonから読み込む」はこちら
dataフォルダに「side.php」を作成
楽天市場ジャンル情報をMySQLに保存しましたので、それを利用して出力を行う処理を記載します。
MySQLに登録する処理を実行すると、かなりの時間が必要になりますので、今回の動作確認のためにテーブルとデータが必要な方は、下記からダウンロードしてご利用ください。
[wpdm_package id=’718′]
<?php
define('DB_HOST', 'MySQLホスト');
define('DB_NAME', 'データベース名');
define('DB_USER', 'ユーザー名');
define('DB_PASS', 'パスワード');
define('DB_TABLE', 'テーブル名');
setlocale(LC_ALL,'ja_JP.UTF-8');
//HTTP出力文字コードの設定
mb_http_output('UTF-8');
date_default_timezone_set('Asia/Tokyo');
header('Content-Type: text/html; charset=UTF-8');
$tableName = DB_TABLE;
$dsn = 'mysql:dbname=' . DB_NAME . ';host=' . DB_HOST . ';charset=utf8;';
$pdo = null;
try {
$pdo = new PDO($dsn, DB_USER, DB_PASS);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
}
catch (PDOException $e) {
die($e->getMessage());
}
//サイドツリー取得SQL
$sql = <<<EOF
SELECT
ID AS id
,Name as text
,'icon-page' as img
FROM
{$tableName}
WHERE
ParentID=:ParentID
ORDER BY
Disp
EOF;
$cnt=0;
$ParentID = 0;
//テーブルからサイドツリー要素を作成
$json['nodes'] = getCat($pdo,$sql,$ParentID);
//サイドバー名
$json['name'] = 'sidebar';
//イベント関数
$java=<<<EOF
function(event){
console.log('id: ' + event.target);
}
EOF;
$json['onClick'] = $java;
header("Content-Type: application/json;charset=utf-8");
echo json_encode($json);
/**
* サイドツリー要素取得関数
* @param type $db データベース接続
* @param type $sql 取得クエリ
* @param type $id キーID
* @return type 連想配列
*/
function getCat($db,$sql,$id){
$stmt = $db->prepare($sql);
$stmt->bindValue(':ParentID',$id,PDO::PARAM_STR);
$rows = array();
if($stmt->execute()) {
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
$node = null;
$node= getCat($db,$sql,$row['id']);
if(count($node) > 0) {
$row['nodes'] = $node;
}
$rows[] = $row;
}
}
return $rows;
}
読み込み先をJsonからPHPに変更
前回作成したscript.js内のgetJson関数で、「data/side.json」を引数にしていました。
こちらを今回は、上記で作成した「data/side.php」に変更しました。
また読み込みに時間が掛かると思われましたので、レイアウトパネルのロック/アンロック処理も追記しました。
$(function () {
var wheight=$(window).height()-15;
$("#main").css("height",wheight);
w2utils.locale('locale/ja-jp.json');
$('#main').w2layout(layout);
$().w2grid(grid);
w2ui.layout.content('main', w2ui['grid']);
//レフトパネルのロック
w2ui.layout.lock('left', 'Loading....', true);
//サイドツリーの読み込み
getJson('data/side.php').then(value => {
var sidebar = value;
$().w2sidebar(sidebar);
w2ui['layout'].content('left', w2ui['sidebar']);
//レフトパネル アンロック
w2ui.layout.unlock('left');
});
//ウィンドウリサイズ時
$(window).resize(function() {
if ($(document.body).hasClass('print')==false ) {
//現在のウィンドウ高さを取得し、要素に設定
var wheight=$(window).height()-15;
$("#main").css("height",wheight);
}
});
});
//パネルスタイル
var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
// レイアウト設定
var layout = {
name: 'layout',
padding: 4,
panels: [
{ type: 'left', size: 200, resizable: true, style: pstyle, content: '' },
{ type: 'main', style: pstyle, content: '' }
]
};
// グリッド設定
var grid = {
name: 'grid',
url: 'data/list.json',
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: '120px' }
]
};
/**
* JSONデータを取得する
*/
async function getJson(url) {
var json
await fetch(url).then(function(response) {
return response.text();
}).then(function(text) {
var parser = function reviver(k, v) {
if (typeof v === 'string' && v.match(/^function/)) {
return Function.call(this, 'return ' + v)();
}
return v;
};
json = JSON.parse(text, parser);
});
return json;
}
まとめ
クリックイベントの処理も含めて正しく表示することができました！
ただし楽天市場のジャンル数が多いため、そのまま表示しようとするとブラウザで応答無しになってしまいます。
こちらは後日、楽天市場ジャンルの下層については初期段階で含まないようにし、クリックされたときに読み込むように修正していきます。
今回のソースファイルは下記からダウンロード可能です。
[wpdm_package id=’724′]