Javascript Unusual root of a tree node

Question

I use the Fancy tree to populate the tree to understand that the code is being displayed

 var treeData = [{"title":"image_test","folder":true,"children":[{"title":"images5","folder":true,"children":[{"title":"img_01.png","children":[]},{"title":"img_02.png","children":[]},{"title":"img_03.png","children":[]},{"title":"img_04.png","children":[]},{"title":"img_05.png","children":[]},{"title":"img_06.png","children":[]},{"title":"img_07.png","children":[]}]},{"title":"images4","folder":true,"children":[{"title":"img_01.png","children":[]},{"title":"img_02.png","children":[]},{"title":"img_03.png","children":[]},{"title":"img_04.png","children":[]},{"title":"img_05.png","children":[]},{"title":"img_06.png","children":[]},{"title":"img_07.png","children":[]}]},{"title":"images3","folder":true,"children":[{"title":"img_01.png","children":[]},{"title":"img_02.png","children":[]},{"title":"img_03.png","children":[]},{"title":"img_04.png","children":[]},{"title":"img_05.png","children":[]},{"title":"img_06.png","children":[]},{"title":"img_07.png","children":[]}]},{"title":"images2","folder":true,"children":[{"title":"img_01.png","children":[]},{"title":"img_02.png","children":[]},{"title":"img_03.png","children":[]},{"title":"img_04.png","children":[]},{"title":"img_05.png","children":[]},{"title":"img_06.png","children":[]},{"title":"img_07.png","children":[]}]},{"title":"images1","folder":true,"children":[{"title":"img_01.png","children":[]},{"title":"img_02.png","children":[]},{"title":"img_03.png","children":[]},{"title":"img_04.png","children":[]},{"title":"img_05.png","children":[]},{"title":"img_06.png","children":[]},{"title":"img_07.png","children":[]}]}]}];


  $(function(){
    $("#tree3").fancytree({
//      extensions: ["select"],
      checkbox: true,
      selectMode: 3,
      source: treeData,
      select: function(event, data) {
        // Get a list of all selected nodes, and convert to a key array:
        var selKeys = $.map(data.tree.getSelectedNodes(), function(node){
          return node.key;
        });
        $("#echoSelection3").text(selKeys.join(", "));

        // Get a list of all selected TOP nodes
        var selRootNodes = data.tree.getSelectedNodes(true);
        // ... and convert to a key array:
        var selRootKeys = $.map(selRootNodes, function(node){
          return node.key;
        });
        $("#echoSelectionRootKeys3").text(selRootKeys.join(", "));
        $("#echoSelectionRoots3").text(selRootNodes.join(", "));
      },
      dblclick: function(event, data) {
        data.node.toggleSelected();
      },
      keydown: function(event, data) {
        if( event.which === 32 ) {
          data.node.toggleSelected();
          return false;
        }
      },
                // The following options are only required, if we have more than one tree on one page:
    //              initId: "treeData",
                cookieId: "fancytree-Cb3",
                idPrefix: "fancytree-Cb3-"
    });
  });

The div used is tree3.

<div id="tree3"></div>
            <div>Selected keys: <span id="echoSelection3">-</span></div>
            <div>Selected root keys: <span id="echoSelectionRootKeys3">-</span></div>
            <div>Selected root nodes: <span id="echoSelectionRoots3">-</span></div></div>

Now I want that whenever the user checks the childnode name of the parent node until the root of the node is shown, I used

var selRootNodes = data.tree.getSelectedNodes(true);

but could not get the result in echoselection as childnode and then to root node

Actually, I want to send the selection to the server so that they are saved, since they are file paths.

Since I am using the tree population for the first time, so graciously naked with me. If there is any other good option, kindly provide.

PS; I want to send the tree path to the server as the address of the directory /abc/acv/ac/xyz.png

Answer 1

:

 $(function(){

    var tree3 = $("#tree3").fancytree({
      checkbox: true,
      selectMode: 3,
      source: $.ajax({
         url: "/getlist",
         dataType: "json"
      }),
      select: function(event, data) {

         // Get a list of all selected nodes, and convert to a key array:
         var selKeys =
            $.map(data.tree.getSelectedNodes(), function(node) {
               if(node.key != 0){
                  return node.key;
               }
            });

         var rootstructures =
            $.map(selKeys, function(item){
               var tempnode = data.tree.getNodeByKey(item);
               var tempstructure = [];
               tempstructure.push(data.tree.getNodeByKey(item).title);  
               while(tempnode.getParent().getParent()){
                  tempstructure.push(tempnode.getParent().title);
                  tempnode = tempnode.getParent();
               }
               tempstructure.reverse();
               return tempstructure.join('/');
            });

      // WRITE DEBUG OUTPUT TO DIVS

         $("#echoSelectionRoots4").text(rootstructures);
         $("#echoSelection3").text(selKeys.join(", "));

         // Get a list of all selected TOP nodes
         var selRootNodes = data.tree.getSelectedNodes(true);
         // ... and convert to a key array:
         var selRootKeys = $.map(selRootNodes, function(node){
            return node.key;
         });
         $("#echoSelectionRootKeys3").text(selRootKeys.join(", "));
         $("#echoSelectionRoots3").text(selRootNodes.join(", "));

      // -----------------

     },
   });
});

, root node echoSelectionRoots4.

: /image_test/image5/img_01.png, /image_test/image5/img_02.png etc