从节点 jstree 返回路径

Question

我正在尝试返回 jstree 中选定节点的路径。我需要节点的整个路径。

我有一个生成 json 的 php 文件，如下所示：

header("Content-Type: application/json; charset=utf8");
echo json_encode(dir_to_jstree_array("/my_path"));

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(
            'text' => basename($dir),
            'icon' => 'jstree-folder',
            'children' => array()
  );

  $files = array();
  $dirs = array();

  if($handler = opendir($dir)) {
     while (($sub = readdir($handler)) !== FALSE) {
        if ($sub != "." && $sub != "..") { 
           if(is_file($dir."/".$sub)) {
              $extension = trim(pathinfo($dir."/".$sub, PATHINFO_EXTENSION));
              $files []= $sub;
           } 
           elseif (is_dir($dir."/".$sub)) {
              $dirs []= $dir."/".$sub;
           }
        }
     }
     if($order === "a") {
       asort($dirs);
     } 
     else {
        arsort($dirs);
     }

     foreach($dirs as $d) {
        $listDir['icon'] = 'jstree-file';
        $listDir['children'][]= dir_to_jstree_array($d);
     }

     if($order === "a") {
        asort($files);
     } 
     else {
        arsort($files);
     }

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

     closedir($handler);
  }
  return $listDir;
}

而我加载 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" ]
          })
           .on("changed.jstree", function (e, data) {
           console.log(data.selected.get_path());
           });

       </script> ';
}

我尝试使用我在文档中看到的函数获取路径：get_path()，但这不起作用。当我调试这个时，我得到了以下错误：

ReferenceError：get_path 未定义

我错过了什么？

更新 @oerl 说我用错了函数，所以这是正确的方法：

                        .
                        .
                        .
$(\'#jstree_demo_div\').jstree(true).get_path(data.node, "/")
$(\'#jstree_demo_div\').jstree(true).get_path(data.node,"/");

var selectedNodes = $(\'#jstree_demo_div\').jstree(true).get_selected();

for(var node in selectedNodes) {
   var path = $(\'#jstree_demo_div\').jstree(true).get_path(data.node,"/");
}
                         .
                         .
                         .

我希望这可以帮助别人，比如帮助我！

Answer 1

您使用的功能错误。你必须像这样使用它：

$(\'#jstree_demo_div\').jstree(true).get_path(data.node,"/");

还要获取您必须使用的选定节点：

var selectedNodes = $(\'#jstree_demo_div\').jstree(true).get_selected();

最后回答您的问题，遍历您的 selectedNodes 并在每个节点上调用 get_path：

 for(var node in selectedNodes) {
   var path = $(\'#jstree_demo_div\').jstree(true).get_path(node,"/");
 }

希望对您有所帮助。

Answer 2

这是一个经过测试的工作示例，说明我使用来自帖子和 cmets 的信息得出的结果，因为帖子中似乎没有指定完整的解决方案。我正在将 jQuery v1.11.0 用于 jsTree 期望的 libs 文件夹下的 jsTree。代码语法已被 pyCharm 检查。

var file_data = [];
// object that represents the DIV for the jsTree
var objTreeView = $("#div_treeview");
// returns a list of <li> ID's that have been sected by the user
var selectedNodes = objTreeView.jstree(true).get_selected();
// This is the best way to loop object in javascript
for (var i = 0; i < selectedNodes.length; i++) {
  // get the actual node object from the <li> ID
  var full_node = objTreeView.jstree(true).get_node(selectedNodes[i]);
  // Get the full path of the selected node and put it into an array
  file_data[i] = objTreeView.jstree(true).get_path(full_node, "/");
}
// Convert the array to a JSON string so that we can pass the data back to the server 
// once the user submits the form data
alert(JSON.stringify(file_data));