JQUERY树,超简单,自带载入jQuery库
var oriData = [ {myId:0,myParent:null,myTitle:'text0'}, {myId:1,myParent:0,myTitle:'text1'}, {myId:2,myParent:0,myTitle:'text2'}, {myId:3,myParent:1,myTitle:'text3'}, {myId:4,myParent:1,myTitle:'text4'}, {myId:5,myParent:3,myTitle:'text5'}, {myId:6,myParent:3,myTitle:'text6'}, {myId:7,myParent:4,myTitle:'text7'} ]; var scpt = document.createElement("script"); scpt.onload = scpt.onreadystatechange = function() { if(this.readyState && this.readyState.toLowerCase() != "loaded") { return; } jQuery.noConflict(); (function($) { function organizeTree(data,idKey,parentKey) { var tmp = {}; $(data).each(function() { tmp[this[idKey]]=this; }); var root; $(data).each(function () { if(this.__parentNode = tmp[this[parentKey]]) { (this.__parentNode.__childNodes||(this.__parentNode.__childNodes=[])).push(this); } else { root = this; } }); return root; } function createTree(data,offset,titleKey,prepend1,prepend2,prepend3) { offset = offset||20; titleKey = titleKey || 'title'; var tmp = $("<div>"); var children = data.__childNodes||[]; var text = (data[titleKey]||"").valueOf(); var titleLayer = $("<div>").appendTo(tmp).html(children.length?prepend1+text:prepend3+text) .css("cursor","pointer").attr("isTitle","true").css("line-height","20px"); var subLayer = $("<div>").css("margin-left",offset+"px").appendTo(tmp); $(children).each(function() { createTree(this,offset,titleKey,prepend1,prepend2,prepend3).appendTo(subLayer); }); if(children.length) { titleLayer.toggle(function() { titleLayer.html(prepend2+text); subLayer.hide("fast"); },function() { titleLayer.html(prepend1+text); subLayer.show("fast"); }); }; return tmp; } $(function() { var root = organizeTree(oriData,'myId','myParent'); createTree(root,20, 'myTitle',"<img src='http://www.destroydrop.com/javascripts/tree/example/img/folderopen.gif'/>", "<img src='http://www.destroydrop.com/javascripts/tree/example/img/folder.gif'/>","<img src='http://www.destroydrop.com/javascripts/tree/example/img/page.gif'/>" ).appendTo(document.body); }); })(jQuery); } scpt.src="http://code.jquery.com/jquery-1.5.min.js"; document.body.appendChild(scpt);