来写颗简单的树......

数据源用数组混json结构

实现了基本的功能

效率一般跟 dhtree 梅花雪树对比了下都差不多 (ps感觉比dhtree快点跟梅花雪树差不多个人测试也许测试的方法是错误的哈哈如果是错误请告诉我一下)

这个实现树的原理是根据json

不断的生成ul li

下面是一个简单的例子 (只有涉及到生成树也就是说只是展示 tree类代码只有64行)

没有用innerHTML生成全是是创建节点来创建ul li

所以创建节点碎片添加然后再一次性添加很重要啊

确实能提高不是速度

在就是处理图片样式了

这个我参照的风之石的那个tree

结构和样式都很好写起来很方便

所以介绍一下

最后一个节点因为没有向下的虚线了 li就不要设置背景图了切+那个图片也要换

这边是里加个 l

如

这个是 +样子样式

#demo .tvdash-f{
background-position: -240px -40px;
}

这个是-样式

#demo .tvdash-f-open{
background-position: -200px -40px;
}

这个就是最后一个节点的样式了

#demo .tvdash-fl{
background-position: -100px -40px;
}

png图在ie6下有点问题所以ie6下图可能会看不见下面那个例子用的是gif的效果在ie6下正常

上面只是一个简单的树

但是树应该是有input的

并且能够选中记录选中

能够开打任何节点

能够删除不

能够编辑保存

说一下我在这里怎么完成上面的功能

选中应该是比较麻烦的

因为选中了一个节点

要让他所有的子节点都选中

他的父节点也有可能要选中(如果同级的都是选中状态的)

接着他的父的父也有可能要选中

所以设计到很多的查找

当生成一个li的时候

给li一个属性

                li.child.push({
                   li    : li,
                   input : isInput ?$q('input',li)[0]:undefined,
                   data : o
               });

记录下他下一级(是下一级不是所有的子 )的所有的input 和li

同时记录父的li 和 input

                li.parent = {
                   li    : parent,
                   input : isInput ?$q('input',parent)[0]:undefined
               };

这样查找起来很方便

但是内存就要用的多些了

例子

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb-2312" /> <title>easytree</title> <style type="text/css"> body{font:12px/1.5 '宋体',tahoma;} ul,li{ list-style: none outside none; margin: 0; overflow: hidden; padding: 0; } #demo span{ background: url("http://www.v-ec.com/dh20156/code/dhatv4/dhatv4/icon.png") no-repeat scroll 0 0 transparent; border: medium none; height: 20px; vertical-align: top; 20px; display :inline-block; } #demo .root{ margin-left: -20px; } #demo .root input{ vertical-align: middle; } #demo ul{ padding-left: 20px; } #demo .folder{ background: url("http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_i.png") repeat-y scroll 0 21px transparent; } #demo span{ background: url("http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_icon.png") no-repeat scroll 0 0 transparent; border: medium none; height: 20px; vertical-align: top; 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; } #demo .tvicon-f{ background-position: -120px -40px; } #demo .tvicon-f-open{ background-position: -140px -40px; } #demo .tvicon-tl{ background-position: -220px -40px; } </style> </head> <body> <div id='sss'></div> <div> 输入id值<br> <input value='101' type="text" id='v'> <input value='展开节点'type="button"onClick="ch(document.getElementById('v').value)"><br><br> 返回的是节点id值也可以是主键值 <input value='查看有多少节点被选中了'type="button"onClick="ss(this.value)"> <br> </div> <div id='demo'></div> <script> (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.$q = function(name,parent){ return parent.getElementsByTagName(name); }; window.$c = function(name,parent){ var elem = typeof name==='object'?name: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<length;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 ) break; } else for ( ; i < length; i++) if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) // break; } else { if ( length === undefined ) { for ( name in object ) if ( callback.call( object[ name ], name, object[ name ] ) === false ) break; } else for ( var value = object[0]; i < length && callback.call( value, i, value ) !== false; value = object[++i] ){} } return object; }; window.currentStyle = function(element){ return element.currentStyle || doc.defaultView.getComputedStyle(element, null); }; window.objPos = function(elem){ var left = 0, top = 0, right = 0, bottom = 0,doc = elem ? elem.ownerDocument : doc; if ( !elem.getBoundingClientRect || window.Sys.ie8 ) { var n = elem; while (n) { left += n.offsetLeft, top += n.offsetTop; n = n.offsetParent; }; right = left + elem.offsetWidth; bottom = top + elem.offsetHeight; } else { var rect = elem.getBoundingClientRect(); left = right = doc.documentElement.scrollLeft || doc.body.scrollLeft; top = bottom = doc.documentElement.scrollLeft || doc.body.scrollLeft; left += rect.left; right += rect.right; top += rect.top; bottom += rect.bottom; } return { "left": left, "top": top, "right": right, "bottom": bottom }; }; window.hasClass = function(element, className){ return element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)')); }; window.addClass = function(element, className){ !window.hasClass(element, className)&&(element.className += " "+className); }; window.removeClass = function(element, className){ window.hasClass(element, className)&&(element.className = element.className.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),' ')); } })(document); //------------------------------------------------------------------------------------ (function(doc,undefined){ var win = this, primary; win.easyTree = function(){ this.init.apply(this,arguments); }; win.easyTree.prototype = { options : { primary : 'id', isInput : false, isIco : false }, init : function(options){ this.deflaut = extend(this.options,options); this.container = options.container; //数据源形式{id:data[i]} this.data={}; //被勾选的项 this.selected = {}; //根节点直接在这里生成 if(options.data.length>=1){ primary = this.deflaut.primary; var frag=document.createDocumentFragment() var ul = $c('ul',frag),//this.container self = this, input = this.deflaut.isInput?'<input type="checkbox">':'', li; each(options.data,function(i,o){ li = $c('li',ul); li.className = 'root'; li.innerHTML = [ '<span class="tvicon-open"></span>', input, '<a href="#">'+o.name+'</a>' ].join(''); li.setAttribute('primary',o[primary]); self.data[o[primary]] = {elem:li,data:o}; o.child &&self.bulidTree(o.child,li,'t'); }); //只绑定一个节点展开和checkedbox判断都在里面 addListener(ul,'click',BindAsEventListener(self,self.operation)); this.container.appendChild(frag); } }, bulidTree : function(data,parent,first){ if(data.length===0) return; var ul = $c('ul',parent), self = this, len = data.length, isInput = this.deflaut.isInput, input = isInput?'<input type="checkbox">':'', isIco = this.deflaut.isIco, imgClassName, img, li; first ? ul.style.paddingLeft = '0px' : ul.style.display = 'none'; parent.child = []; each(data,function(i,o){ var isLast = (len-1)===i, ico = isIco ? o.child ? '<span class="tvicon-f"></span>' : '<span class="tvicon-tl"></span>' : ''; li = $c('li',ul); li.className = 'folder'+(isLast?'l':''); imgClassName = o.child ? isLast?'tvdash-fl':'tvdash-f' : isLast?'tvdash-tl':'tvdash-t'; li.innerHTML = [ '<span class="'+imgClassName+'"></span>', ico, input, '<a href="#">'+o.name+'</a>' ].join(''); //当前li保存父li的相关信息只是一个对象 li.parent = { li : parent, input : isInput ?$q('input',parent)[0]:undefined }; //当前li保存子li的相关信息是一个数组 parent.child.push({ li : li, input : isInput ?$q('input',li)[0]:undefined, data : o }); li.setAttribute('primary',o[primary]); li.getElementsByTagName('span')[0].setAttribute('mark','mark'); self.data[o[primary]] = {elem:li,data:o}; o.child &&self.bulidTree(o.child,li); }); }, operation : function(e){ var elem = e.srcElement || e.target, nodeName = elem.nodeName.toLocaleLowerCase(); /*显示隐藏子菜单*/ if((nodeName==='span'&&elem.getAttribute('mark'))||(nodeName==='a')){ var li = elem.parentNode, ul = $q('ul',li)[0], img = $q('span',li)[0], ico = $q('span',li)[1]; if(ul){ ul.style.display = ul.style.display === 'none'?'':'none'; var name = img.className, is = img.className.indexOf('open')>-1; img.className = is?name.replace('-open',''):name+'-open'; if(ico){ ico.className = is?ico.className.replace('-open',''):ico.className+'-open'; } } }; //选中checkedbox的时候的相应的操作 if(nodeName==='input'){ var isCheck = elem.checked, li = elem.parentNode, ul = $q('ul',li)[0], id = li.getAttribute('primary'), //该元素的索引是否已经添加到了 this.selected中 isIn = id in this.selected; //操作this.selected 从里面添加或者删除 isCheck ? !isIn &&(this.selected[id]=id) : isIn &&delete this.selected[id]; this.findChild(li,isCheck); this.findParent(li,isCheck); } }, findParent : function(child,b){ if(!child.parent) return; var parentLi = child.parent.li, id = parentLi.getAttribute('primary') isAll = true; if(b){ //看他父下面的所有li是不是都是选中状态的 each(parentLi.child,function(i,o){ if(!o.input.checked){ isAll = false; return false; } }); //如果都是选中状态 //继续查找他的父 if(isAll){ child.parent.input.checked = true; !(id in this.selected) &&(this.selected[id] = id); this.findParent(parentLi,b); } }else{ if(child.parent.input.checked){ child.parent.input.checked = false; id in this.selected && delete this.selected[id]; this.findParent(parentLi,b); } } }, /* 查找子节点将所有没有选中的字节点选中并放到this.selected里面去或者取消所有的子节点 */ findChild : function(parent,b){ if(!parent.child) return; var self = this; b ? each(parent.child,function(i,o){ if(!o.input.checked){ o.input.checked = true; !(o.data[primary] in self.selected) &&(self.selected[o.data[primary]] = o.data[primary]); o.li.child &&self.findChild(o.li,b); } }) : each(parent.child,function(i,o){ if(o.input.checked){ o.input.checked = false; o.data[primary] in self.selected && delete self.selected[o.data[primary]]; o.li.child &&self.findChild(o.li,b); } }); }, getAllSelect : function(){ var arr = [], id; for(id in this.selected) arr.push(id); return arr.join(',') }, openNode : function(id){ if(id in this.data){ var li = this.data[id].elem, parent = li.parentNode, img, ico; while(parent.style.display==='none'){ parent.style.display = ''; li = li.parent.li; img =$q('span',li)[0]; ico =$q('span',li)[1]; img.className=img.className+'-open'; ico &&(ico.className=ico.className+'-open'); parent = li.parentNode; } } } } })(document); window.onload = function(){ var i = 0,j=100; var data1 = [{id:i,name:'根节点',child:[]}]; while(i<100){ i++; data1[0].child.push({id:i,name:'节点'+i,child:[ {id:++j,name:'节点'+i+'-1',child:[ {id:++j,name:'节点'+i+'-1-1'}, {id:++j,name:'节点'+i+'-1-2'}, {id:++j,name:'节点'+i+'-1-3'} ]}, {id:++j,name:'节点'+i+'-2',child:[ {id:++j,name:'节点'+i+'-2-1'}, {id:++j,name:'节点'+i+'-2-2'}, {id:++j,name:'节点'+i+'-2-3'} ]}, {id:++j,name:'节点'+i+'-3-1'} ]}); } var t = new Date().getTime(); window.tt= new easyTree({ container : $$('demo'), isInput : true, isIco : true, data : data1 }); //alert(new Date().getTime()-t1) $$('sss').innerHTML ='一共1000个节点共耗时：'+ (new Date().getTime()-t)+'毫秒' } function ch(v){ tt.openNode(v) } function ss(){ alert(tt.getAllSelect()); } </script> </body> </html>

恩找个时间补个ajaxtree

来 写颗简单的树......

来写颗简单的树......