Select the following Topics you are interested
This is an simplier plugin which is even simplier than the jQuery Simple Tree-Set plugin. In this example, if you want to display a file structure, you can assume every item (file/folder) as an "TreeSetNode". "TreeNode" is different from "TreeSetNode" that it is simplier and don't require its children to be unique.
Use the new jQuery.TreeNode() for constructing a new node. If you want to construct a TreeNode t1 with content "file1.txt", use the following syntax:
var t1=new jQuery.TreeNode("file1.txt");
If you want to add a TreeNode t2 directly after the t1, simply use the createChild() method
var t1=new jQuery.TreeNode("file1.txt");
var t2=t1.createChild("file2.txt");
If you want to display the result inside a table with id=example, use the appendTo() method:
var t1=new jQuery.TreeNode("file1.txt");
var t2=t1.createChild("file2.txt");
t1.appendTo($("table#example"));
1. The "Fans of Classic ASP" site used the simple tree node for it's table of content.
2. The following is an example of how the outcome look like:
| 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-node.js"></script>
<script type="text/javascript">
(function($){
var t0=new jQuery.TreeNode("c:\\");
var t1=t0.createChild("Document and Settings");
var t2=t1.createChild('My Documents');
var t3=t1.createChild('My Desktop')
t3.createChild("book1.xls");
t2.createChild('jquery.js');
var t4=t0.createChild("windows");
t4.createChild("explorer.exe");
$("document").ready(function(){
var tbody=$("#tree");
t0.appendTo(tbody);
});
})(jQuery);
</script>
The following is the source code of the jQuery Plugin.
<script type="text/javascript">
(function($){if(typeof $.TreeNode=="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");
$.TreeNode=function (value,layer,parent){
this.layer=layer||0;
this.value=value||"";
this.parent=parent||null;
if(typeof parent!="undefined") parent.appendChild(this);
};
$.TreeNode.prototype.createChild=function(value){
var childNode;
if(typeof value!="undefined"){
if(typeof this.childList=="undefined") {
this.childList=[];
}
if(typeof value=="string"){
childNode=new $.TreeNode(value);
} else if(typeof value=="object"){
childNode=value
}
childNode.parent=this;
childNode.layer=this.layer+1;
this.childList.push(childNode);
}
return childNode
};
$.TreeNode.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) {
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('')
};
$.TreeNode.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.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 TreeNode=$(this).removeClass("tsn-expanded-node").addClass("tsn-collapsed-node")
.data("TreeSet");
TreeNode.isCollapsed=true;
TreeNode.collapse();
},function(){
var TreeNode=$(this).removeClass("tsn-collapsed-node").addClass("tsn-expanded-node")
.data("TreeSet")
TreeNode.isCollapsed=false;
TreeNode.expand();
});
return this.target
};
$.TreeNode.prototype.expand=function(){
if(!this.isCollapsed && this.childList && this.childList.length>0)
for(var i=0;i<this.childList.length;i++)
this.childList[i].show().expand();
return this
};
$.TreeNode.prototype.show=function(){
this.target.show();
return this
};
$.TreeNode.prototype.collapse=function(){
if(this.childList && this.childList.length>0)
for(var i=0;i<this.childList.length;i++)
this.childList[i].hide().collapse();
return this
};
$.TreeNode.prototype.hide=function(){
this.target.hide();
return this
};
$.TreeNode.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>
Click the link for downloading the plugin.
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