jsTreeにphpから渡したデータを反映させる

jsTreeというエクスプローラ風のUIを作るためのライブラリがあるらしい。
www.jstree.com


jsTreeはCDNから読み込むことができる。JQueryを使うのでそれもついでに読み込む。

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.2/themes/default/style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.2/jstree.min.js"></script>

jsTreeを表示したい領域にdivを区切ってidをつけておこう。

<div id="test">
</div>

後は、こんな風にjsonを渡すとエクスプローラ風に表示してくれる。

$('#test').jstree({ 'core' : {
    'data' : [
       { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
       { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
       { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
       { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
    ]
} });

ただ表示する内容を動的に生成してほしいので、
phpで持っているarrayをjson化して渡してみる。

<?php
$arr = [
	0 => [
		'id' => "1",
		'parent' => "#",
		'text' => "test"
	],
	1 => [
		'id' => "2",
		'parent' => "#",
		'text' => "test2",
	],
	2 => [
		'id' => "3",
		'parent' => "2",
		'text' => "child",
	]
];
$json = json_encode($arr);

するとこんな感じだ。
f:id:Kow:20181106083521j:plain

<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.2/themes/default/style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.2/jstree.min.js"></script>
</head>
<body>
<?php
$arr = [
	0 => [
		'id' => "1",
		'parent' => "#",
		'text' => "test"
	],
	1 => [
		'id' => "2",
		'parent' => "#",
		'text' => "test2",
	],
	2 => [
		'id' => "3",
		'parent' => "2",
		'text' => "child",
	]
];
$json = json_encode($arr);
?>

<div id="test">
</div>
	
<script>
$('#test').jstree({ 'core' : {
    'data' : <?php echo $json ?>
} });
</script>

</body>
</html>