Complete path from the root node in Javascript Fancy tree

I am using Fancy tree to populate the tree, for understanding the code is shown

 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 the name of the parent node until the root node is also shown for this i have used

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

but was not able to get the result in echoselection as childnode and then until 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 population of tree first time so kindly bear with me. If there is any other good option kindly provide.

P.S; I want to send the tree path to server in the form of directory address /abc/acv/ac/xyz.png image is attached which is not showing image5 and image_test in the selected root nodes

After searching and looking deep into the code i found the solution :

 $(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(", "));

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

     },
   });
});

This implementation works and now on selection the path till root node is populated on the echoSelectionRoots4 object.

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

Recommended topics

Hot tags