使用 jstree 格式化目录的结果答案

【问题标题】：Formating results of a directory using jstree使用 jstree 格式化目录的结果
【发布时间】：2014-05-13 14:33:34
【问题描述】：

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

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

我想要这个结果：

我错过了什么？

【问题讨论】：

@hek2mgl 这是我的问题:)

标签： javascript php json jstree

【解决方案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;
}

【讨论】：

【解决方案2】：

为您的文件添加图标您可以使用此代码：

最后一个代码：

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

【讨论】：