从节点jstree返回路径

Question

I'm trying to return the paths of selected nodes in jstree. I need the whole path of the nodes.

I have a php file that generate the json, like this:

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

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

       </script> ';
}

I tried to get the path with the function that I saw on documentation: get_path() , but this is not working. When I debug this, I got the following error:

ReferenceError: get_path is not defined

What am I missing?

UPDATE @oerl said me that I was using the function wrong, so this is the right way:

                        .
                        .
                        .
$(\'#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,"/");
}
                         .
                         .
                         .

I hope this can help someone, like helped me!

Answer 1

You are using the function wrong. You have to use it like this:

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

Also to get the selected nodes you have to use:

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

Finally to answer your question iterate through your selectedNodes and call get_path on each node:

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

Hope that helps.

Answer 2

Here is a tested, working example of what I came up with using the information from the posts and comments thus far as there does not seem to be a complete solution specified in a post. I'm using jQuery v1.11.0 for the jsTree under the libs folder where jsTree is expecting it to be. The code syntax has been checked by 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));