質問

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:enter image description here. 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: enter image description here

What am I missing?

役に立ちましたか?

解決

I found what I was doing wrong, the sctructure of array (that I was building JSON) was wrong. I was doing this:

$listDir = array(
   'data' => basename($dir),
   'attr' => array (
      'rel' => 'folder'
    ),
    'metadata' => array (
       'id' => $dir
    ),
    'children' => array()
);

But the correct structure (in version 3.0 of jstree) is:

$listDir = array(
   'id' => basename($dir),
   'text' => basename($dir),
   'children' => array()
);

So, my php file (dir2json.php) looks like this:

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(
            'id' => basename($dir),
            'text' => basename($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;
}

他のヒント

for add icon to your file you can use this code :

last code :

foreach($files as $file) {
    $listDir['children'][]= $file;
 }

new code :

foreach($files as $file) {
            $exten = pathinfo($file, PATHINFO_EXTENSION);
            if(in_array($exten, $ext)) {
                $icon = '';
                if($exten == 'jpg' or $exten == 'png' or $exten == 'jpeg' or $exten == 'gif' or $exten == 'ico'){
                    $icon = 'fa fa fa-file-image-o';
                }// end if
                if($exten == 'doc' or $exten == 'docx'){
                    $icon = 'fa fa-file-word-o';
                }
                if ($exten == 'txt'){
                    $icon = 'fa fa-file-text-o';
                }
                if ($exten == 'pdf'){
                    $icon = 'fa fa-file-pdf-o';
                }
                if ($exten == 'xls'){
                    $icon = 'fa fa-file-excel-o';
                }
                if ($exten == 'zip'){
                    $icon = 'fa fa-file-archive-o';
                }
            }
            $listDir['children'][]= array('id' => $dir.'/'.$file , 'text' => $file , 'icon' => $icon);
        }
ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top