Javascript 使用jstree格式化目录的结果

我正在尝试使用转换树中的目录url。根据这篇帖子：@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> ';
}

函数加载_js（）{
回声'
加载上的函数\u padrao（）{
$（\'\'jstree\u demo\u div\'）.jstree({
\'核心\'：{
\“数据\”：{
\“type\”：“POST”，
\“url\”：\“mypath/dir2json.php\”，
\“数据\”：函数（节点）{
返回{'id\'：节点[“id”]}；
}
},
\“数据类型\”：“json \”
},
\“插件\:[“复选框”]
}); 
}
';
}

我想得到这个结果：

---

我遗漏了什么？

我发现我做错了什么，数组的结构（我正在构建JSON）错了。 我是这样做的：

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

但正确的结构（在jstree的3.0版中）是：

因此，我的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;
}

用于将图标添加到文件中 您可以使用以下代码：

最后代码：

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

新代码：

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

---

@hek2mgl这是我的问题：）

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