Documentation

Plugins/Treeview

From jQuery JavaScript Library

Jump to: navigation, search

« Back to the jQuery Treeview Plugin page

Transform an unordered list into an expandable and collapsable tree, great for unobtrusive navigation enhancements.

NameType
Example:
A simple jQuery Treeview.

$("#example").treeview();


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/treeview/demo/screen.css" type="text/css" />
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.css" type="text/css" />
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.js"></script>
  <script>
  $(document).ready(function(){
    $("#example").treeview();
  });
  </script>
  
</head>
<body>
  <ul id="example" class="filetree">
		<li><span class="folder">Folder 1</span>
			<ul>
				<li><span class="file">Item 1.1</span></li>
			</ul>
		</li>
		<li><span class="folder">Folder 2</span>
			<ul>
				<li><span class="folder">Subfolder 2.1</span>
					<ul>
						<li><span class="file">File 2.1.1</span></li>
						<li><span class="file">File 2.1.2</span></li>
					</ul>
				</li>
				<li><span class="file">File 2.2</span></li>
			</ul>
		</li>
		<li class="closed"><span class="folder">Folder 3 (closed at start)</span>
			<ul>
				<li><span class="file">File 3.1</span></li>
			</ul>
		</li>
		<li><span class="file">File 4</span></li>
	</ul>
</body>
</html>

NameType
Documentation:




NameType
treeview( options ) Returns: jQuery
Takes an unordered list and makes all branches collapsable.
Demos:

NameType

[edit]

About the async treeview extension

See the async treeview demo

Note that in the original async code, the only part of the list that exists at first is just an <ul>, and an </ul>. On the page load, treeview is loaded with the parameter "url: source.php," which is the page it goes to for its data. If you take a look at the treeview.async.js file, you can actually see that on the load of treeview, it hits the load function with a "root" value of "source," thus populating the page with the initial list. In the load() function the json object it passes into source.php as post data is {root: root} where the name of the key is root, and the value is "source", as passed in by the $.fn.treeview function in the treeview.async.js file. Therefore, it's actually passing {"root" : "source"} to source.php.

Look in source.php and you'll see that the if statement checks for $_REQUEST['root'], and checks to see if it equals "source." Since it does, it responds with the orginal list you see on the page at load. Note the certain classes used in each node to determine whether or not it "hasChildren" (shows a plus sign next to it, and is expandable), whether or not it is originally open, etc. Very handy stuff. You can even send your own classes back, and have them applied as well.

So, after the initial loading of the tree, treeview.async.js actually extends itself again, this time assigning the toggle setting to an anonymous function that goes and grabs more data when you expand a node for the first time.

Alright, so looking at the third major node ("After Lunch"), it's currently closed. Click the plus sign, and since there's already data, it show the rest of the tree. Click the 3.6 node, and treeview goes /back/ to source.php for more data, except that it isn't passing "source" as the value of "root", anymore. This time it's passing the id of the node you clicked on as the value of "root". In source.php, it doens't find that "root" == "source", and responds with the bottom half of the data, thus filling the node with the data you find on the bottom.

Retrieved from "http://docs.jquery.com/Plugins/Treeview"