Simple JQuery Treeview

N.B. This treeview has now been replaced by a more advanced sortable one on LiveFlex.co.uk called Sortable Treeview.

I’ve been trying to write my first JQuery plug in and went for a tree view because I need to display some nested data. Nothing complicated and more about trying to understand the JQuery plug in structure really. It’s pretty well commented so I won’t explain it 😀

I will develop this further as I start to use it. Need to add options and possibly drag and drop. I also use it as a mix of treeview/listview with option links in. That’s done mainly with css and a small change to the link handler.

If javascript is disabled it just renders as a tree view without collapsing. There a simple demo below and a demo with graphics here.

  • Directory
  • Directory
    • directory
      • directory
        • file
      • file
      • file
      • file
    • file
    • file
    • file
  • file
  • file
// (C) FruitBatInShades.com Jan 2009
//
// Simple extensions to turn a ul into a treeview
//
// History:
// 0.1 - Simply folds nested treeviews by hiding li.directory ul's and fires passed in callback when the node has href=#= or class of file
//
// TERMS OF USE
//
// jQuery.fbis.Treeview is licensed under a Creative Commons License and is copyrighted (C)2008 by FruitBatInShades, a.k.a. Lee Davies
// For details, visit http://creativecommons.org/licenses/by/3.0/uk/
// Based up jQuery File Tree by Cory S.N. LaViska.
/*
    Usage: $('#ParentDiv').treeview(options,nodeClick)
 
    Simple plugin that takes a unordered list, collapses all li.directory on init and handles expanding and collapsing those nodes.
    It also accepts a callback that is fired when a link with a href of '#' is found.
*/
if (jQuery) (function($) {
    $.extend($.fn, {
        treeview: function(options, callback) {
            // Defaults
            if (!options) var options = {};
 
            // initialise tree
            var tree = $(this);
            //collapse folder initially
            tree.find('ul.Treeview li.directory').addClass('collapsed')
            //add click handler
			tree.click(function(e) { handleClick(e) });
 
            function handleClick(e) {
                //is the click on me or a child
                var node = $(e.target);
                //check the link is a directory
                if (node.is("li.directory")) { //Is it a directory listitem that fired the click?
                    //do collapse/expand
                    if (node.hasClass('collapsed')) {
                        node.find('>ul').toggle(); //need the > selector else all child nodes open
                        node.removeClass('collapsed').addClass('expanded');
                    }
                    else if (node.hasClass('expanded')) {
                        node.find('>ul').toggle();
                        node.removeClass('expanded').addClass('collapsed');
                    }
                    //its one of our directory nodes so stop propigation
                    e.stopPropagation()
                } else if (node.attr('href') == '#' | node.hasClass('file')) {
                    //its a file node with a href of # so execute the call back
                    // if the item that fired the click is not either a folder or a file it cascades as normal
                    // so that contained links behave like normal
                    callback(e);
                }
 
            }
        }
    });
})(jQuery);
<script type="text/javascript">// <![CDATA[
  			$('document').ready(function(){ 				$('#demo').treeview(null, function(e){alert(e.target);}); 				} 			);
// ]]></script>
  • Directory
    • file
    • directory
      • file
      • file
  • Directory
    • directory
      • directory
        • file
      • file
      • file
      • file
    • file
    • file
    • file
  • file
  • file

2 Responses to “Simple JQuery Treeview”

  1. syndrael says:

    Is there a link to download it completely (with images) ?
    Best regards from Paris, France.
    S.

  2. fbis says:

    Just zipped it up for you Zip

Leave a Reply

Your email address will not be published. Required fields are marked *