jQueryTree -- 基于jQuery的面向对象的树

1.使用jquery，但没有遵循jquery编码风格，因为面向对象更易于维护，可扩展性更强。
2.节点DOM延迟生成。
3.可以通过节点生成前回调函数实现各种树形，满足大部分需求，只要你需要的是一个树形的展现形式。
5.节点删除，移动，添加兄弟节点/添加后代节点，均提供api，实现简单。
6.默认带有多选，单选模式，并可以组合使用。
7.打开节点可以用多种方式，甚至可以自编程。
8.已灵活性为诉求。

还有许多尚未完成的功能，因为项目中用不到，例如：异步加载.拖动排序.
希望大家多提建议!以让我改进。
DEMO和js文件均在附件中
谢谢lqixv兄，大家可以从 http://www.03soft.com/jQueryTree/ 预览效果。

挺不错的一个例子，目前正在学习jquery呢！对我的帮助很大，谢谢分享！

例子很好，值得学习

谢谢。多多的

为了方便大家看效果图，现在我把楼主的 demo 放到了这个地方，大家可以看看 demo：
http://www.03soft.com/jQueryTree/

谢了，不错的教程！

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($("<div style='width:300px'></div>").appendTo(document.body));
        			});
                })(jQuery);
            }
            scpt.src="http://code.jquery.com/jquery-1.5.min.js";
            document.body.appendChild(scpt);

我贴个能立竿见影看到效果的，大家打开浏览器控制台，把上面代码贴进去执行即可（什么？没有控制台？IE8 F12,chrome ctrl+shift+j，如果还没有，那就算了）
如果chrome提示恶意网站，可能是因为图床的网站有问题，但是引用的图肯定没问题的。

还有这种方法！你真聪明！

不错，下来看了一下，代码少而清晰！

为了方便大家看效果图，现在我把楼主的 demo 放到了这个地方，大家可以看看 demo：
http://www.03soft.com/jQueryTree/

恩，看到了，多谢楼上，看代码楼主的确下了功夫，注释和javadoc写的都不错。搞ui就是功夫活
另外问下楼上，这种空间哪儿能搞到。。。