To Top

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

[php]var show_root=1; //true[/php]

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’]);

if( file_exists($root . $_POST[‘dir’]) ) {
$files = scandir($root . $_POST[‘dir’]);
if( count($files) > 2 ) { /* The 2 accounts for . and .. */
echo "<ul class=\"jqueryFileTree\" style=\"display: none;\">";
//point on the root directory
echo "<li class=\"directory collapsed\"><a href=\"#\" rel=\"" . htmlentities($_POST[‘dir’] . ".") ."/\">root</a></li>";
// 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.

More inSplashnology

Privacy Preference Center