JS + Div +CSS 实现类 windows 树
Js 类 文件//author xxp //Email 54249636@qq.com//deployvar AddOnclick=Class.create({ initialize:function(_oc){ if(typeof _oc == 'function'){ this.beforeOnclick=_oc; }else{this.beforeOnclick=function (){return;} } }});//TreeNotevar TreeNote=Class.create({//树的子节点,//初始化 参数 textValue,rank,onclick,deployBottominitialize:function(textValue,onclick,deployBottom){this.textValue=textValue,this.onclick=onclick,this.deployBottom=deployBottom;//父节点this.superNote=null;//包含divthis.outerDiv=null;//树的DIVthis.superDiv=null;},appendChildNote:function (/*TreeNote*/_obj){//不存在子节点包含数组则创建if(!this.childNote)this.childNote=[];this.childNote=_obj;_obj.superNote=this;},//是否存在子节点 haveChildNote:function(){return !(!this.childNote);},haveSuperNote:function(){return !(!this.superNote);},isLast:function(){ //是否有父节点 if(this.haveSuperNote()){ return this.superNote.childNote==this; } return true; } });//TreeStylevar TreeStyle=Class.create({//数的样式 initialize:function(_1,_2,_3,_4,_5,_6,_7,_8,_9,_10){this._1=_1,this._2=_2,this._3=_3,this._4=_4,this._5=_5,this._6=_6,this._7=_7,this._8=_8,this._9=_9,this._10=_10;} });var Tree=Class.create({initialize:function(_container,root){this.container=_container;//容器divthis.root=root;//最高节点this.style=new TreeStyle("C1","C2","C3","C4","C5","C6","C7","C8","C9","C10");var _t=new Element("div");this.container.appendChild(_t);this.display(_t,this.root);},addNote:function(_root){this.root=_root;},display:function(_outerDiv,_note){var _s=this.style;//该层容器DIVvar _root=_outerDiv;//该节点容器DIVvar _t_r_d=new Element("div");_root.appendChild(_t_r_d);//捆绑进对象_note.outerDiv=_t_r_d;_note.superDiv=_root;//创建行DIVvar _t_r_c=new Element("div");_t_r_d.appendChild(_t_r_c);//临时变量一var _t1=null;var _t_s_o=null; //上层对象//获取层var rank=0;_t_s_o=_note;for(;;){ if(!_t_s_o.haveSuperNote()) break; _t_s_o=_t_s_o.superNote; rank++;//if(rank>10)break;}//显示前面的div for(var i=rank;i>0;i--){_t_s_o=_note;for(var j=i-1;j>=0;j--){_t_s_o=_t_s_o.superNote;;}_t1=new Element("div");if(_t_s_o.isLast()){_t1.className=_s._8;}else{_t1.className=_s._4;}_t_r_c.appendChild(_t1);} //显示前面的展开Or Not _t1=new Element("div"); _t_r_c.appendChild(_t1); _t1._bindNote=_note; _t1._tree=this; _t1._isOpen=false; _t1.onclick=function(){ this._bindNote.deployBottom.beforeOnclick(); if(this._bindNote.haveChildNote()){this._tree.showNext(this);this._isOpen=!this._isOpen;this._tree.changeCss(this, this._isOpen?this._tree.style._6:this._tree.style._7 );} } if(_note.haveChildNote()){if(_note.isLast()){_t1.className=_s._7;}else{_t1.className=_s._5; }}else{ if(_note.isLast()){_t1.className=_s._3;}else{_t1.className=_s._2; }} _t1=new Element("div"); _t_r_c.appendChild(_t1); _t1._bindNote=_note; _t1._tree=this; _t1.className=_s._9; _t1.onclick=function(){ this._bindNote.onclick.beforeOnclick(); } _t1.update(_note.textValue) }, showNext:function(_obj){//_t = trueif(_obj._isOpen){_obj._bindNote.childNote.superDiv.remove();return;}var _t=new Element("div");_obj._bindNote.outerDiv.appendChild(_t);for(var i=0;i<_obj._bindNote.childNote.length;i++){this.display(_t,_obj._bindNote.childNote);} }, changeCss:function(_obj,_className){_obj.className=_className; } });
测试 页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="prototype.js"></script><script src="tree.js"></script><script>var rootNote=new TreeNote("测试树Root",new AddOnclick(function(){alert("root")}),new AddOnclick(function(){})); rootNote.appendChildNote(new TreeNote("测试树_---t",new AddOnclick(function(){}),new AddOnclick(function(){})));t= new TreeNote("测试树111t",new AddOnclick(function(){}),new AddOnclick(function(){}));t.appendChildNote(new TreeNote("测试树1t",new AddOnclick(function(){}),new AddOnclick(function(){})));t.appendChildNote(new TreeNote("测试树1t",new AddOnclick(function(){}),new AddOnclick(function(){})));t.appendChildNote(new TreeNote("测试树1t",new AddOnclick(function(){}),new AddOnclick(function(){})));rootNote.appendChildNote(t);rootNote.appendChildNote(new TreeNote("测试树_---t",new AddOnclick(function(){}),new AddOnclick(function(){})));function init(){new Tree($("tree"),rootNote)}</script><title>无标题文档</title><style>#tree div{ clear:both; font-size:12px;}#tree .C1{ float:left; clear:none; height:16px; width:15px; background:url(TreeAll.gif) 0 0 no-repeat;cursor:pointer;}#tree .C2{ float:left; clear:none; height:16px; width:15px; background:url(TreeAll.gif) 0 -16px no-repeat;cursor:pointer;}#tree .C3{ float:left; clear:none; height:16px; width:15px; background:url(TreeAll.gif) 0 -32px no-repeat;cursor:pointer;}#tree .C4{ float:left; clear:none; height:16px; width:15px; background:url(TreeAll.gif) 0 -48px no-repeat;cursor:pointer;}#tree .C5{ float:left; clear:none; height:16px; width:15px; background:url(TreeAll.gif) 0 -64px no-repeat;cursor:pointer;}#tree .C6{ float:left; clear:none; height:16px; width:15px; background:url(TreeAll.gif) 0 -80px no-repeat;cursor:pointer;}#tree .C7{ float:left; clear:none; height:16px; width:15px; background:url(TreeAll.gif) 0 -96px no-repeat;cursor:pointer;}#tree .C8{ float:left; clear:none; height:16px; width:15px; cursor:pointer;}#tree .C9{ float:left; clear:none; height:16px; width:200px;cursor:pointer; overflow:hidden; line-height:16px; text-indent:3px;}</style></head><body ><div id="tree"><div>测试</div></div></body></html>
页:
[1]