html5 树形结构 js,用JavaScript实现一个简单的树结构

数据源用数组混json结构，实现了基本的功能。效率一般，跟 dhtree 梅花雪树对比了下，都差不多。 (ps感觉比dhtree快点，跟梅花雪树差不多，个人测试)

这个实现树的原理是根据json，不断的生成ul li， 下面是一个简单的例子(只有涉及到生成树，也就是说只是展示，tree类代码只有64行) 没有用innerHTML生成，全是是创建节点来创建ul li，所以创建节点碎片添加，然后再一次性添加很重要啊，确实能提高速度。

easytree

ul,li{

list-style: none outside none;

margin: 0;

overflow: hidden;

padding: 0;

}

#demo{

background-color:#F0FBEB;

}

#demo .root{

margin-left: -20px;

}

#demo ul{

padding-left: 20px;

}

#demo .folder{

background: url("../../images/201202/r_i.png") repeat-y scroll 0 21px transparent;

}

#demo img{

background: url("../../images/201202/r_icon.png") no-repeat scroll 0 0 transparent;

border: medium none;

height: 20px;

vertical-align: top;

width: 20px;

}

#demo .tvicon-open{

background-position: -160px -40px;

}

#demo .tvdash-f{

background-position: -240px -40px;

}

#demo .tvdash-f-open{

background-position: -200px -40px;

}

#demo .tvdash-fl{

background-position: -100px -40px;

}

#demo .tvdash-fl-open{

background-position: -80px -40px;

}

#demo .tvdash-t{

background-position: -180px -40px;

}

#demo .tvdash-tl{

background-position: -60px -40px;

}

(function(doc,undefined){

var window = this;

window.Sys = function (ua){

var b = {

ie: /msie/.test(ua) && !/opera/.test(ua),

opera: /opera/.test(ua),

safari: /webkit/.test(ua) && !/chrome/.test(ua),

firefox: /firefox/.test(ua),

chrome: /chrome/.test(ua)

},vMark = "";

for (var i in b) {

if (b[i]) { vMark = "safari" == i ? "version" : i; break; }

}

b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0";

b.ie6 = b.ie && parseInt(b.version, 10) == 6;

b.ie7 = b.ie && parseInt(b.version, 10) == 7;

b.ie8 = b.ie && parseInt(b.version, 10) == 8;

return b;

}(window.navigator.userAgent.toLowerCase());

window.Sys.ie6&&doc.execCommand("BackgroundImageCache", false, true);

window.$$ = function(Id){

return doc.getElementById(Id);

};

window.$c = function(name,parent){

var elem = doc.createElement(name);

parent&&parent.appendChild(elem);

return elem;

};

window.addListener = function(element,e,fn){

!element.events&&(element.events = {});

element.events[e]&&(element.events[e][addListener.guid++]=fn)||(element.events[e] = {'0':fn});

element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn);

};

window.addListener.guid = 1;

window.removeListener = function(element,e,fn){

var handlers = element.events[e],type;

if(fn){

for(type in handlers)

if(handlers[type]===fn){

element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn);

delete handlers[type];

}

}else{

for(type in handlers){

element.removeEventListener?element.removeEventListener(e,handlers[type],false):element.detachEvent("on" + e,handlers[type]);

delete handlers[type];

}

}

};

window.setStyle = function(e,o){

if(typeof o=="string")

e.style.cssText=o;

else

for(var i in o)

e.style[i] = o[i];

};

var slice = Array.prototype.slice;

window.Bind = function(object, fun) {

var args = slice.call(arguments).slice(2);

return function() {

return fun.apply(object, args);

};

};

window.BindAsEventListener = function(object, fun,args) {

var args = slice.call(arguments).slice(2);

return function(event) {

return fun.apply(object, [event || window.event].concat(args));

}

};

//copy from jQ

window.extend = function(){

var target = arguments[0] || {}, i = 1, length = arguments.length, deep = true, options;

if ( typeof target === "boolean" ) {

deep = target;

target = arguments[1] || {};

i = 2;

}

if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]")

target = {};

for(;i

if ( (options = arguments[ i ]) != null )

for(var name in options){

var src = target[ name ], copy = options[ name ];

if ( target === copy )

continue;

if ( deep && copy && typeof copy === "object" && !copy.nodeType ){

target[ name ] = arguments.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy );

}

else if(copy !== undefined)

target[ name ] = copy;

}

}

return target;

};

//copy from jQ

window.each = function ( object, callback, args ) {

var name, i = 0, length = object.length;

if ( args ) {

args = Array.prototype.slice.call(arguments).slice(2);

if ( length === undefined ) {

for ( name in object )

if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false )

<