jQuery Simple Tree-set plugin

Description

This plugin shows you how easy to display an expandable tree. However, if you consider this example is not simple enough, go to "Simple Tree-Node Plugin", you will find the even simplier way for constructing tree.

In this example, if you want to display a file structure, you can assume every item (file/folder) as an "TreeSetNode". "TreeSetNode" is different from "TreeNode" that every "TreeSetNode" allows only unique children. That means if "TreeSetNode" t0 followed by two "TreeSetNodes", these two "TreeSetNodes" cannot have same name. Use the new jQuery.TreeSetNode() for constructing a new node. new jQuery.TreeSetNode() requires at least one parameter, which is a unqiue string (ID) describing the node. If you want to construct a TreeSetNode t1 with ID: file1 and the content "file1.txt", use the following syntax:

var t1=new jQuery.TreeNodeSet("file1","file1.txt");

Demonstration

Drive C:

<p><table style="border-collapse:collapse;border:1px solid #666;" id="tree">
<tr style="background:#EEE;"><td style="width:300px;border-bottom:1px solid #666">Drive C:</td></tr>
</table>

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.simple-tree-set.js"></script>
<script type="text/javascript">
(function($){
	var t0=new jQuery.TreeSetNode("root","c:\\");
	var t1=new jQuery.TreeSetNode("doc","Document and Settings");
	t0.appendChild(t1);
	var t2=new jQuery.TreeSetNode("doc",'My Documents');
	var t3=new jQuery.TreeSetNode("desktop",'My Desktop')
	t1.appendChild(t2).appendChild(t3);
	t3.appendChild("book1","book1.xls");
	t2.appendChild("jquery",'jquery.js');
	var t4=new jQuery.TreeSetNode("win","windows",1,t0);
	t4.appendChild("explorer","explorer.exe");
	$("document").ready(function(){
		var tbody=$("#tree");
		t0.appendTo(tbody);
	});
})(jQuery);
</script>

jQuery Plugin Source Code

The following is the source code of the jQuery Plugin.

<script type="text/javascript">
(function($){if(typeof $.TreeSetNode=="undefined"){
	var lineColumn={};
	$(['<style>table.tsn-collapse-table{border-collapse:collapse;',
		'border:none;padding:0px;margin:0px;}',
		'td.tsn-blank-square{width:10px;height:10px;',
		'padding:0px;margin:0px;}',
		'span.tsn-content{font:13px}',
		'td.tsn-L-square{width:10px;height:10px;width:10px;',
		'height:10px;border-left:1px dashed #666;',
		'border-bottom:1px dashed #666;padding:0px;margin:0px;}',
		'td.tsn-square-leftLine{width:10px;height:10px;',
		'border-left:1px dashed #666;padding:0px;margin:0px;}',
		'td.tsn-rect-leftline{width:10px;height:20px;',
		'border-left:1px dashed #666;padding:0px;}',
		'td.tsn-rect-blank{width:10px;height:20px;',
		'padding:0px;margin:0px;}',
		'.tsn-pure-node{width:20px;height:20px;float:left;',
		'background:url(../images/options.gif) no-repeat 2px 2px;}',
		'.tsn-expandable-node{width:40px;height:20px;float:left;}',
		'.tsn-expanded-node{background:url(../images/pkg-open.gif) no-repeat 2px 1px;}',
		'.tsn-collapsed-node{background:url(../images/pkg-closed.gif) no-repeat 2px 1px;}',
		'</style>'].join('')).appendTo("head");
	$.TreeSetNode=function (name,value,layer,parent){
		this.layer=layer||0;
		this.value=value||"";
		this.name=name||"root";
		this.parent=parent||null;
		if(typeof parent!="undefined") parent.appendChild(this);
	}
	$.TreeSetNode.prototype.appendChild=function(name,value){
		if(typeof name!="undefined"){
			if(typeof this.childNodes=="undefined") {
				this.childNodes={};
				this.childList=[];
			}
			if(typeof name=="string"){
				this.childNodes[name]=new $.TreeSetNode(name,value,this.layer+1,this);
			} else if(typeof name=="object"){
				var childNode=name;
				if(typeof this.childNodes[childNode.name]=="undefined")
					this.childList.push(childNode.name);
				this.childNodes[childNode.name]=childNode;
				childNode.layer=this.layer+1;
				childNode.parent=this;
			}
		}
		return this
	};
	$.TreeSetNode.prototype.addRow=function(hasChildNodes){
		if(hasChildNodes)
			lineColumn["p"+this.layer]=true;
		if (this.parent==null) return ((hasChildNodes)?'<div class="tsn-expandable-node tsn-expanded-node"></div>'
			:'<div class="tsn-pure-node"></div>')+'<span>'+this.value+'</span>';
		var s=[];
		s.push('<table class="tsn-collapse-table"><tr>');
		for(var i=0;i<this.layer-1;i++) s.push(this.getVertLine(i));
		s.push('<td><table class="tsn-collapse-table">');
		s.push('<tr><td class="tsn-blank-square"></td><td class="tsn-L-square"></td></tr>');
		if(this.parent.childList[this.parent.childList.length-1]==this.name) {
			s.push('<tr><td class="tsn-blank-square"></td><td class="tsn-blank-square"></td></tr>');
			lineColumn["p"+(this.layer-1)]=false;
		}else 	
			s.push('<tr><td class="tsn-blank-square"></td><td class="tsn-square-leftLine"></td></tr>');
		s.push('</table></td><td valign="middle">');
		if(hasChildNodes) s.push('<div class="tsn-expandable-node tsn-expanded-node"></div>');
		else s.push('<div class="tsn-pure-node"></div>');
		s.push('<span class="tsn-content">'+this.value+'</span></td></tr></table>');
		return s.join('')
	};
	$.TreeSetNode.prototype.appendTo=function(parent){
		var tbody=($(parent)[0].nodeName.toLowerCase()=="tbody")?$(parent):$(parent).find("tbody");
		this.target=$('<tr><td style="padding:0px;margin:0px;"></td></tr>')
			.appendTo(tbody).data("TreeSet",this);
		if(this.childList && this.childList.length>0){
			this.target.find("td").append($(this.addRow(true)));
			for(var i=0;i<this.childList.length;i++){
				this.childNodes[this.childList[i]].appendTo(tbody);
			}
		} else this.target.find("td").append($(this.addRow()));
		this.target.find("div.tsn-expandable-node").data("TreeSet",this).toggle(function(){
			var treeSetNode=$(this).removeClass("tsn-expanded-node").addClass("tsn-collapsed-node")
				.data("TreeSet");
			treeSetNode.isCollapsed=true;
			treeSetNode.collapse();
		},function(){
			var treeSetNode=$(this).removeClass("tsn-collapsed-node").addClass("tsn-expanded-node")
				.data("TreeSet")
			treeSetNode.isCollapsed=false;
			treeSetNode.expand();
		});
		return this.target
	};
	$.TreeSetNode.prototype.expand=function(){
		if(!this.isCollapsed && this.childList && this.childList.length>0)
			for(var i=0;i<this.childList.length;i++)
				this.childNodes[this.childList[i]].show().expand();
		return this
	};
	$.TreeSetNode.prototype.show=function(){
		this.target.show();
		return this
	};
	$.TreeSetNode.prototype.collapse=function(){
		if(this.childList && this.childList.length>0)
			for(var i=0;i<this.childList.length;i++)
				this.childNodes[this.childList[i]].hide().collapse();
		return this
	};
	$.TreeSetNode.prototype.hide=function(){
		this.target.hide();
		return this
	};
	$.TreeSetNode.prototype.getVertLine=function(column){
		if(typeof lineColumn["p"+column]=="undefined" || lineColumn["p"+column]) return '<td><table class="tsn-collapse-table">'
			+'<tr><td class="tsn-rect-blank"></td><td class="tsn-rect-leftline"></td></tr>'
			+'</table></td>';
		else
			return '<td><table class="tsn-collapse-table">'
			+'<tr><td class="tsn-rect-blank"></td><td class="tsn-rect-blank"></td></tr>'
			+'</table></td>';
	};
}})(jQuery);

</script>

Download the plugin

Click the link for downloading the plugin.

Copyright and licensing

All the plugin source codes and the examples are copyright of C. F., Wong
Please feel free to use any code listed in this page, they are licensed under the MIT License:
http://www.opensource.org/licenses/mit-license.php