w2uiサイドツリーを外部Jsonから読み込む

前回作成した初期環境を元に、サイドツリーを外部Jsonから読み込む処理を作成してみました。

前回記事「w2uiの初期環境を構築する」はこちら

Jsonを読み込む関数を追加する

サイドツリーには、外部から設定を読み込むプロパティも無ければメソッドもありません。

ですので別途Jsonを読み込む、下記の関数を「script.js」に追加しました。

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;
}

サイドツリーの項目と、Jsonに定義してあるfunctionも読み込めるようにしてみました。

サイドツリー用のJsonファイルを作成する

dataフォルダに、「side.json」として下記内容を保存しました。

{
	"name": "sidebar",
	"nodes": [
		{"id": "level-1","text": "Level 1","img": "icon-folder","expanded": true,"group": true,
			"nodes": [
				{"id": "level-1-1","text": "Level 1.1","icon": "fa-home"},
				{"id": "level-1-2","text": "Level 1.2","icon": "fa-star"},
				{"id": "level-1-3","text": "Level 1.3","icon": "fa-star-empty"}
			]
		},
		{"id": "level-2","text": "Level 2","img": "icon-folder","expanded": true,"group": true,
			"nodes": [
				{"id": "level-2-1","text": "Level 2.1","img": "icon-folder","count": 3,
					"nodes": [
						{"id": "level-2-1-1","text": "Level 2.1.1","icon": "fa-star-empty"},
						{"id": "level-2-1-2","text": "Level 2.1.2","icon": "fa-star-empty","count": 67},
						{"id": "level-2-1-3","text": "Level 2.1.3","icon": "fa-star-empty"}
					]
				},
				{"id": "level-2-2","text": "Level 2.2","icon": "fa-star-empty"},
				{"id": "level-2-3","text": "Level 2.3","icon": "fa-star-empty"}
			]
		}
	],
	"onClick":"function(event){\nconsole.log('id: ' + event.target);\n}"
}

サイドツリーJsonを読み込みレイアウトに設定

下記コードで、サイドツリーJsonを読み込みw2uiのサイドツリーとして展開後に、レイアウトのleftに設定してます。

getJson('data/side.json').then(value => {
	var sidebar = value;
	$().w2sidebar(sidebar);	 
	w2ui['layout'].content('left', w2ui['sidebar']);
 });

まとめ

[wpdm_package id=’710′]

js/script.js

$(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']);
	
	//サイドツリーの読み込み
	getJson('data/side.json').then(value => {
		var sidebar = value;
		$().w2sidebar(sidebar);	 
		w2ui['layout'].content('left', w2ui['sidebar']);
	 });
	 
	//ウィンドウリサイズ時
	$(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: 'left' },
            { type: 'main', style: pstyle, content: 'main' },
        ]
};

// グリッド設定
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;
}

data/side.json

{
	"name": "sidebar",
	"nodes": [
		{"id": "level-1","text": "Level 1","img": "icon-folder","expanded": true,"group": true,
			"nodes": [
				{"id": "level-1-1","text": "Level 1.1","icon": "fa-home"},
				{"id": "level-1-2","text": "Level 1.2","icon": "fa-star"},
				{"id": "level-1-3","text": "Level 1.3","icon": "fa-star-empty"}
			]
		},
		{"id": "level-2","text": "Level 2","img": "icon-folder","expanded": true,"group": true,
			"nodes": [
				{"id": "level-2-1","text": "Level 2.1","img": "icon-folder","count": 3,
					"nodes": [
						{"id": "level-2-1-1","text": "Level 2.1.1","icon": "fa-star-empty"},
						{"id": "level-2-1-2","text": "Level 2.1.2","icon": "fa-star-empty","count": 67},
						{"id": "level-2-1-3","text": "Level 2.1.3","icon": "fa-star-empty"}
					]
				},
				{"id": "level-2-2","text": "Level 2.2","icon": "fa-star-empty"},
				{"id": "level-2-3","text": "Level 2.3","icon": "fa-star-empty"}
			]
		}
	],
	"onClick":"function(event){\nconsole.log('id: ' + event.target);\n}"
}

Javaスクリプトあまり得意では無いので、もっと良い方法があるかもしれません(;^_^A