Design, CG Graphics & Inspiration
How to Modify a Tree with the Help of jQuery

How to Modify a Tree with the Help of jQuery

Often there are some cases when you need to display a tree relationship’s structure of any entity. For example, a navigation through the file system menu of the site or the content of a book.

The easiest way of displaying a tree-type structure in HTML is with the help of listings. But we are interested in trees that have dynamic properties. And here we can’t do without javascript. Since you have to find a solution very quickly, withthe use of jQuery you can create dynamic trees, saving a decent time on coding. To save ourselves a lot more time we usually go to a search engine and look for a suitable solution. In general, often in this case a site’s tree creation stops on this stage, but there are times when a tree is suitable, but it’s missing some small features and there is no other choice except of modifying the existing tree.

In this topic we are going to have a good look at such tree examples as Treeview and jQuery File Tree.

For Treeview we need to do the correct addition of new sublists in the tree. On the one hand it may seem that the problem is strange, because tree has the ability to add new sublists to the add selector. Like this:

var tree = $(".selector").treeview();
$(".button").click(function() {
 var newSublist = $("<li><span class='folder'>New Sublist</span><ul>" +
   "<li><span class='file'>Item1</span></li>" +
   "<li><span class='file'>Item2</span></li></ul></li>").appendTo(tree);
 tree.treeview({
  add: newSublist
 });
});

But this approach has a disadvantage, the node here can be added either to the end of the tree or only to a specific sub node.And it’s not that easy to add a new node to the selected sub node, because the search of positive results described in the documentation is not provided.
Therefore, we apply the method of external interference in the conduct of the tree:

$(function() {
  var pervios_node; //remember the previous selected node
  $("#browser").treeview({
    toggle: function() {//when the tree is expanded or minimized
      $(this).addClass("selector"); //add a class
    //check if there is a previous node and whether it equals the current node (click twice)
      if (pervios_node!=undefined &&pervios_node!=this) {
                            //remove our class from the previous node
        $(pervios_node).removeClass("selector");
      };
      pervios_node=this;
    }
  });
  $("#add").click(function() {
    //addition of the node to the current selected node
    var branches = $("<li><span class='folder'>New Sublist</span><ul><li><span class='file'>Item2</span></li></ul></li>").appendTo("li.selectorul:first");
    $("#browser").treeview({
      add: branches
    });
  });
});

The key point of intervention is appendTo («li.selectorul: first»). We have added a class selector, to mark the currently selected node and now we can find it and add new nodes.

The second tree is designed to display the file system structure. But it has one slight drawback. If you disable the displaying of the files in connector, leaving only the directories, you cannot view the contents of the root folder.
To resolve this problem it’s necessary to change the tree itself, and at the same time to correct a small error, which is present in the original script.
Proceed. We pass to the script tree jqueryFileTree.js and after setting the default options for the tree we’ll add a line:

var show_root=1; //true

Below in the iterator function we will correct the transfer parameters in the POST request, adding the missingroot parameter (now the connector will not react on the missing variable), in the current version of this option is a blank line, since it participates in the formation of paths in the connector. Finally, we add the governing parameter by adding the root node into the tree – showroot.

$.post(o.script, { dir: t, root: '',showroot:show_root }, function(data) {
…
});
show_root=0; //false

After the function we zero the parameter of adding a root node to the tree, so it does not appear in the sub nodes. The final touch is the change of connector.

$_POST['dir'] = urldecode($_POST['dir']);
$root= urldecode($_POST['root']);
$show_root=(bool)urldecode($_POST['showroot']);

if( file_exists($root . $_POST['dir']) ) {
  $files = scandir($root . $_POST['dir']);
  natcasesort($files);
  if( count($files) > 2 ) { /* The 2 accounts for . and .. */
    echo "<ul class=\"jqueryFileTree\" style=\"display: none;\">";
    //point on the root directory
    if($show_root)
    {
      echo "<li class=\"directory collapsed\"><a href=\"#\" rel=\"" . htmlentities($_POST['dir'] . ".") ."/\">root</a></li>";
    }
    else
    {
      // All dirs
      foreach( $files as $file ) {
        if( file_exists($root . $_POST['dir'] . $file) &&
                $file != '.' &&
                $file != '..' &&
                is_dir($root . $_POST['dir'] . $file) ) {
          echo "<li class=\"directory collapsed\"><a href=\"#\" rel=\"" . htmlentities($_POST['dir'] . $file) . "/\">" . htmlentities($file) . "</a></li>";
        }
      }
      // All files
    }
    echo "</ul>";
  }
}

Thus, we have a root directory from which the others have seen as sub-nodes of the tree.
Here you can find the demo of the trees.

  • Ceiceron,
  • September 27, 2011

SHARE THIS POST

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.

  • Very cool article written on the Rights of the rulers in javascript, bravo to the author ..

  • Karl Gude

    Hi, I’m not a programmer, but I’m in need of a tree structure for an NSF project I’m working on with about 300 searchable nodes. The kicker is that I want it to be 3D and possibly even look more like a real tree than a bracket-type structure. ! Do you think such a visualization is possible with today’s programming options?

  • Very cool article written on the Rights of the rulers in javascript, bravo to the author ..

  • Karl Gude

    Hi, I’m not a programmer, but I’m in need of a tree structure for an NSF project I’m working on with about 300 searchable nodes. The kicker is that I want it to be 3D and possibly even look more like a real tree than a bracket-type structure. ! Do you think such a visualization is possible with today’s programming options?