I'm trying to transform a directory url in a tree using jstree. Based on this post: Need help formatting results of a directory listing in PHP, javascript tree control by @hek2mgl, I got something like in the screenshot:. My problem is that it isn't showing the name of my directories, it just shows me the name of the files that I have inside the directory but not the name of the directory.
My php function is quite the same that @hek2mgl's post:
file: dir2json.php
header("Content-Type: application/json");
echo json_encode(dir_to_jstree_array("/var/www/html/images"));
function dir_to_jstree_array($dir, $order = "a", $ext = array()) {
if(empty($ext)) {
$ext = array (
"jpg", "gif", "jpeg", "png", "doc", "xls", "pdf", "tif", "ico", "xcf", "gif87", "scr"
);
}
$listDir = array(
'data' => basename($dir),
'attr' => array (
'rel' => 'folder'
),
'metadata' => array (
'id' => $dir
),
'children' => array()
);
$files = array();
$dirs = array();
if($handler = opendir($dir)) {
while (($sub = readdir($handler)) !== FALSE) {
if ($sub != "." && $sub != "..") {
if(is_file($dir."/".$sub)) {
$extension = pathinfo($dir."/".$sub, PATHINFO_EXTENSION);
if(in_array($extension, $ext)) {
$files []= $sub;
}
}
elseif (is_dir($dir."/".$sub)) {
$dirs []= $dir."/".$sub;
}
}
}
if($order === "a") {
asort($dirs);
}
else {
arsort($dirs);
}
foreach($dirs as $d) {
$listDir['children'][]= dir_to_jstree_array($d);
}
if($order === "a") {
asort($files);
}
else {
arsort($files);
}
foreach($files as $file) {
$listDir['children'][]= $file;
}
closedir($handler);
}
return $listDir;
}
The json returned from this dir2json.php is:
{"data":"images","attr":{"rel":"folder"},"metadata":{"id":"\/var\/www\/html\/images"},"children":[{"data":".xvpics","attr":{"rel":"folder"},"metadata":{"id":"\/var\/www\/html\/images\/.xvpics"},"children":["fundo2.jpg","mha1.gif","mha2.gif","the777.gif"]},{"data":"tree_20x20","attr":{"rel":"folder"},"metadata":{"id":"\/var\/www\/html\/images\/tree_20x20"},"children":["tree_h.png","tree_h.xcf","tree_l.png","tree_l.xcf","tree_t+-.xcf","tree_t+.png","tree_t+.xcf","tree_t-.png","tree_t-.xcf","tree_t.png","tree_t.xcf","tree_v.png","tree_v.xcf"]},{"data":"tree_25x25","attr":{"rel":"folder"},"metadata":{"id":"\/var\/www\/html\/images\/tree_25x25"},"children":["tree_h.png","tree_h.xcf","tree_l.png","tree_l.xcf","tree_t+-.xcf","tree_t+.png","tree_t+.xcf","tree_t-.png","tree_t-.xcf","tree_t.png","tree_t.xcf","tree_v.png","tree_v.xcf"]},{"data":"tree_30x30","attr":{"rel":"folder"},"metadata":{"id":"\/var\/www\/html\/images\/tree_30x30"},"children":[{"data":".xvpics","attr":{"rel":"folder"},"metadata":{"id":"\/var\/www\/html\/images\/tree_30x30\/.xvpics"},"children":["tree_h.png","tree_h.xcf","tree_l.png","tree_l.xcf","tree_t+-.xcf","tree_t+.png","tree_t+.xcf","tree_t-.png","tree_t-.xcf","tree_t.png","tree_t.xcf","tree_v.png","tree_v.xcf"]},{"data":"tst","attr":{"rel":"folder"},"metadata":{"id":"\/var\/www\/html\/images\/tree_30x30\/tst"},"children":["conv.scr","tree_h.gif","tree_h.gif87","tree_h.png","tree_h.xcf","tree_l.gif","tree_l.png","tree_l.xcf","tree_t+-.gif","tree_t+-.xcf","tree_t+.gif","tree_t+.png","tree_t+.xcf","tree_t-.gif","tree_t-.png","tree_t-.xcf","tree_t.gif","tree_t.png","tree_t.xcf","tree_v.gif","tree_v.png","tree_v.xcf"]},"tree_h.png","tree_h.xcf","tree_l.png","tree_l.xcf","tree_t+-.xcf","tree_t+.png","tree_t+.xcf","tree_t-.png","tree_t-.xcf","tree_t.png","tree_t.xcf","tree_v.png","tree_v.xcf"]},"asc.gif","back.gif","bg.gif","cygnus.ico","desc.gif","eud_owner.png","favicon.ico","fundo2.jpg","mha.ico","mha1.gif","mha1_14_06_2007.gif","mha1_t3.gif","mha1_t4.gif","mha2.gif","mha2.png","mha2_MURILO.gif","mha2_ORIGINAL.gif","show-calendar.gif","the777.gif","tree_h.gif","tree_h.png","tree_h.xcf","tree_l.gif","tree_l.png","tree_l.xcf","tree_t+-.gif","tree_t+-.xcf","tree_t+.gif","tree_t+.png","tree_t+.xcf","tree_t-.gif","tree_t-.png","tree_t-.xcf","tree_t.gif","tree_t.png","tree_t.xcf","tree_v.gif","tree_v.png","tree_v.xcf"]}
And my php function that load javascript is:
function load_js() {
echo ' <link rel="stylesheet" type="text/css" href="/css/jstree/dist/themes/default/style.min.css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jstree/dist/jstree.min.js"></script>
<script type="text/javascript">
function on_load_padrao() {
$(\'#jstree_demo_div\').jstree({
\'core\' : {
\'data\' : {
\'type\' : "POST",
\'url\' : \'mypath/dir2json.php\',
\'data\' : function (node) {
return { \'id\' : node["id"]};
}
},
\'dataType\' : \'json\'
},
\'plugins\' : ["checkbox" ]
});
}
</script> ';
}
I'd like to have this result:
What am I missing?