javascript - 使用 jstree 格式化目录结果

Question

我正在尝试使用 jstree 转换树中的目录 url 。基于这篇文章:Need help formatting results of a directory listing in PHP, javascript tree control作者:@hek2mgl，我得到了类似屏幕截图的内容: 。我的问题是它没有显示我的目录的名称，它只显示目录中的文件的名称，而不是目录的名称。

我的 php 函数与 @hek2mgl 的帖子完全相同:

文件: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;
}

从此dir2json.php返回的json是:

{"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"]}

我加载 JavaScript 的 php 函数是:

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

我想要这样的结果:

我错过了什么？

Answer 1

我发现我做错了什么，数组的结构(我正在构建 JSON)是错误的。我正在这样做:

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

但是正确的结构(在 jstree 3.0 版本中)是:

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

所以，我的 php 文件 (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(
            '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;
}