Adding Elements to a Tree with TreeView jQuery

When it comes to building hierarchical menus that will be used as part of web-based navigational interfaces, one of the best solutions available today is a powerful jQuery plug-in called TreeView. This package comes with a number of handy options that allow you to create collapsible trees very quickly by using only a few simple nested HTML lists. This is the conclusion to a six-part series that uses numerous code samples to show you how to master the main features provided by the TreeView library.

Naturally, if you’ve read the previous installment of this series, it’s quite possible that you already have a clear idea of how to utilize the great variety of options offered by this plug-in to create truly dynamic hierarchical trees. In that specific article, I explained how to use the “persist” parameter to easily save the state of a given tree across several HTTP requests. 

In reality, the “persist” option takes two possible values. The first one, called “location,” allows you to maintain the settings of the tree via the “href” attributes of the hyperlinks that comprise it, while the second one, identified as “cookie,” obviously saves the tree’s state by using some cookies. 

However, it’s worth mentioning that the “TreeView” plug-in offers an additional feature, named “add,” that deserves a close analysis. It can be employed to dynamically add elements to a selected tree. Therefore, in this last chapter of the series I’m going to discuss how to work with it, thus finishing this introductory overview to this powerful jQuery plug-in. 

Ready to tackle the final episode of this educational journey? Then let’s get going! 

{mospagebreak title=Review: persisting hierarchical menus with TreeView’s persist option} 

Before I proceed to demonstrate how to dynamically add elements to a hierarchical tree, I’d like to reintroduce the two examples developed in the previous part of the series. These were aimed at illustrating how to use the “persist” option to save the state of a targeted tree. 

Having said that, here’s how these code samples were created originally:

 

(example on using the ‘persist: location’ option)

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Example on jQuery TreeView (using the persist: location option)</title>

<link rel="stylesheet" href="jquery.treeview.css" type="text/css" />

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.treeview.js"></script>

<script>

// build treeview after web page has been loaded

$(document).ready(function(){

$("#menu").treeview({

persist: "location"

});

});

</script>

</head>

<body>

<ul id="menu">

<li>Link 1

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 2

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 3

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 4

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 5

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

</ul>

</body>

</html>

 

 

(example on using the ‘persist: cookie’ option)

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Example on jQuery TreeView (using the persist: cookie option)</title>

<link rel="stylesheet" href="jquery.treeview.css" type="text/css" />

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.treeview.js"></script>

<script>

// build treeview after web page has been loaded

$(document).ready(function(){

$("#menu").treeview({

persist: "cookie"

});

});

</script>

</head>

<body>

<ul id="menu">

<li>Link 1

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 2

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 3

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 4

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 5

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

</ul>

</body>

</html>

 

As shown above, it’s fairly simple to maintain the state of a selected tree across several HTTP requests by using the “persist” option. In the first example, this argument has been assigned a “location” value, implying that the settings of the tree will be maintained according to the value of the “href” attribute corresponding to the tree’s hyperlinks. The second case is a bit more intuitive; it will perform a similar saving process by using some cookies. 

At this point, you’ll have surely recalled how to work with the previous “persist” argument, so the next thing that I’m going to cover will consist of explaining how to dynamically add elements to an existing tree via JavaScript. 

As you might have guessed, this process will be accomplished by means of another handy argument provided by the “TreeView” plug-in, and its implementation will be discussed in the section to come. So click on the link below and proceed to read the new few lines.

{mospagebreak title=Adding elements to an existing tree with the add option} 

As I stated right at the beginning of this article, the “TreeView” plug-in comes equipped with an option that allows you to easily add elements to an existing tree in a truly dynamic way. The option in question is called, not surprisingly, “add,” and it’s very simple to use. So let’s get right to it with a functional code sample.  

Below I coded for you a brand new example that shows how to use this option to append a single sub link to a sample tree. Check it out:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Example on jQuery TreeView (using the add option)</title>

<link rel="stylesheet" href="jquery.treeview.css" type="text/css" />

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.treeview.js"></script>

<script>

// build treeview after web page has been loaded

$(document).ready(function(){

var tree = $("#menu").treeview();

$("#link").click(function(){

var subLink = $("<li>New Sub link<ul><li>Sub link 1</li></ul></li>").appendTo(tree);

tree.treeview({

add: subLink

});

});

});

</script>

</head>

<body>

<p><a href="#" id="link">Add Sub link</a></p>

<ul id="menu">

<li>Link 1

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 2

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 3

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 4

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 5

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

</ul>

</body>

</html>

 

As you may have noticed, in the above example there’s a simple hyperlink that allows you to add a new element to the existing tree. In this case, each time someone clicks on the link, it invokes the aforementioned “add” option, and in consequence, a new sub link will be appended to the targeted tree. 

To help you understand more clearly how this process works, below I included a screen shot that shows how single sub links are added to the previous tree. Have a look at it:

 

 

See how easy it is to dynamically append elements to a tree via the “add” option? I guess you do. Though, in case you still have some doubts with reference to this procedure, in the final section of this tutorial I’m going to code a similar example that will show you how to add multiple sub links. 

To see how this last example will be created, click on the link that appears below and read the upcoming segment.

{mospagebreak title=Appending multiple sub links with the add option} 

If you found it easy to use the “add” option to append a single sub link to a targeted tree, then when I show you how to perform the same task with multiple links, you’ll grasp this process in a snap. But as usual, it’s best to back up the corresponding theory with a functional code sample. Therefore, take a look at the one below, which is very simple to follow:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Example on jQuery TreeView (using add option)</title>

<link rel="stylesheet" href="jquery.treeview.css" type="text/css" />

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.treeview.js"></script>

<script>

// build treeview after web page has been loaded

$(document).ready(function(){

var tree = $("#menu").treeview();

$("#link").click(function(){

var subLink = $("<li>New Sub link<ul><li>Sub link 1</li><li>Sub link 2</li><li>Sub link 3</li></ul></li>").appendTo(tree);

tree.treeview({

add: subLink

});

});

});

</script>

</head>

<body>

<p><a href="#" id="link">Add multiple sub links</a></p>

<ul id="menu">

<li>Link 1

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 2

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 3

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 4

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 5

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

</ul>

</body>

</html>

 

Here you have it. Now, each time the link located on top of the previous web page is clicked, it’ll append multiple sub links to the pertinent tree, thanks to the action of the “add” option. Also, it’d be quite useful to complement this explanation with an image that shows the result produced by the above example. Here it is:

 

 

Of course, the example shown previously is only that, so if you want to get the most out of the “add” option, I suggest you try appending different HTML elements, rather than a few nested lists. And as a bottom line for this article, feel free to edit and introduce your own enhancements to all of the code samples included in it; in this way you can arm yourself with a more solid background in working with the “TreeView” plug-in. The experience will be instructive, that’s already guaranteed. 

Final thoughts 

Sad but true, this is the end of this series. I hope you have enjoyed reading it as much as I did writing it. As you learned in the different articles, the “TreeView” jQuery plug-in is a JavaScript library that combines high-end features with a truly flat learning curve, which contributes to speeding up the development of dynamic web-based hierarchical structures. 

See you in the next web development tutorial!

[gp-comments width="770" linklove="off" ]

antalya escort bayan antalya escort bayan Antalya escort diyarbakir escort