tree.htm

一款JavaScript

			var p = me;
			do{
				if(p.level>0){
					p = p.parent;
				}else{
					break;
				}
			}while(p!=null);			
			return p;
		}

		this.toString = function(tv){

			if(tv){
				control = tv;
			}

			var oNode			= document.createElement("div");
				document.body.appendChild(oNode);

				oNode.className = "Node";
				oNode.noWrap	= true;
				oNode.onselectstart = function(e){ e = e||event;return typeof(e.srcElement.type)!="undefined"&&e.srcElement.type=="text";}
				oNode.oncontextmenu = function(e){ return treeview.prototype.oncontextmenu(me);}

				for(var i=0;i<this.indent.length-1;i++){
					var iIcon = document.createElement("img");
						iIcon.align = "absmiddle";
						iIcon.src	= this.indent[i]?control.Ficons.blank.src:control.Ficons.line.src;

					oNode.appendChild(iIcon);
				}

			var hIcon			= document.createElement("img");
				oNode.appendChild(hIcon);

				hIcon.align		= "absmiddle";						
				hIcon.src		= me.nodes.length>0?(me.opened?(me.level>0?(me.isLast?control.Ficons.minusbottom.src:control.Ficons.minus.src):(me.isLast?control.Ficons.minusbottom.src:control.Ficons.rminus.src)):(me.level>0?(me.isLast?control.Ficons.plusbottom.src:control.Ficons.plus.src):(me.isLast?control.Ficons.plusbottom.src:control.Ficons.rplus.src))):(me.level>0?(me.isLast?control.Ficons.joinbottom.src:control.Ficons.join.src):me.isLast?control.Ficons.joinbottom.src:control.Ficons.join.src);
				hIcon.onclick	= function(){me.toggle();};
				

			var fIcon			= document.createElement("img");
				oNode.appendChild(fIcon);
				fIcon.align		= "absmiddle";
				fIcon.src		= me.icon?this.icon:(me.nodes.length>0?(me.opened?control.Ficons.open.src:control.Ficons.close.src):control.Ficons.file.src);
				fIcon.onclick	= function(e){ me.select();return treeview.prototype.onnodeclick(me);};
				fIcon.ondblclick= function(e){ return treeview.prototype.onnodedblclick(me);};

			if(control&&control.check){

				var iCheck			= document.createElement("input");
					iCheck.type		= "checkbox";
					iCheck.checked	= me.checked;
					if(me.checked){
					var vc = document.createAttribute("checked");
						vc.value = "true";
					iCheck.attributes.setNamedItem(vc);
					}
					iCheck.onclick	= function(){me.checked=!me.checked; treeview.prototype.onnodecheck(me);}
					oNode.appendChild(iCheck);

				this.checkNode = iCheck;
			}

			var eText			= document.createElement("span");
				oNode.appendChild(eText);
			var eA				= document.createElement("a");
				eText.appendChild(eA);

				eA.innerHTML	= me.caption?me.caption	:"";
				eA.target		= me.target?me.target	:"";
				eA.href			= me.action?me.action	:"";
				eA.onkeydown	= function(e){ return treeview.prototype.onnodekeydown(me,e);}
				eA.ondblclick	= function(e){ return treeview.prototype.onnodedblclick(me);}
				eA.onmousedown  = function(e){ return treeview.prototype.onnodemousedown(me)}
				eA.onmouseup	= function(e){ return treeview.prototype.onnodemouseup(me);}
				eA.onclick		= function(e){me.select();return treeview.prototype.onnodeclick(me);};
				eA.onfocus		= function(e){ 
					var before = null;
					if(control){
						before = control.selected;
						if(control.selected)control.selected.unselect();						
						control.selected=me;
					}
					if(before!=me)treeview.prototype.onselectchange(before,me);
					me.select();
				}

				eA.ondragstart	= function(e){if(control.drag){var oData = window.event.dataTransfer;oData.effectAllowed = "move";oData.dropEffect ="none";control.dragFrom = me;control.dragTo=null;}}
				eA.ondragenter 	= function(e){if(control.drag){control.dragTo = me;me.select();}}
				eA.ondragend	= function(e){if(control.drag){if(control.dragFrom!=control.dragTo&&control.dragTo!=null){treeview.prototype.onnodedrag(control.dragFrom,control.dragTo);}}}
				eText.className = "Node-unselect";
				eText.title		= me.title;
				eText.ondragover= function(e){if(control.drag){var oEvent = window.event;oEvent.returnValue = false;}}

				me.container.style.display = me.opened?"":"none";

				oNode.appendChild(me.container);
				me.showed = true;

				this.baseNode	= oNode;
				this.handleNode = hIcon;
				this.folderNode = fIcon;
				this.textNode	= eText;

				return oNode;				
		}
		this.edit = function(){

			if(control.selected!=this)this.select();

			this.textNode.style.display	  =	"none";
			this.textNode.style.className = "Node-unselected";


			var oNode = this.baseNode;						
			var o = document.createElement("input");

				o.type				= "text";
				o.style.borderWidth = "1px";
				o.style.width		= "80px";
				o.value				= this.caption;

				oNode.insertBefore(o,this.textNode);
			
			o.onblur = function(){	
				if(this.value.length==0){
					o.focus();
					return false;
				}

				var oldText = me.text;
				var newText = this.value;				
				
				me.setCaption(this.value);

				this.parentNode.removeChild(this);					

				me.textNode.style.display	= "";
				me.textNode.className = "Node-selected";

				//fire the event
				treeview.prototype.onnodeafteredit(this,oldText,newText);

				me.select();										
			}

			o.onkeypress = function(e){
				var e = e||event;
				if(e.keyCode==13){
					o.blur();
				}
			}
			try{o.scrollIntoView(false)}catch(e){};
			o.select();
		}

		//expand the node
		this.expand = function(){
			if(this.nodes.length>0){
				if(!this.opened){
					this.opened	= true;
					//if(Global.cookieless==false){
					//	setCookie("Node"+this.id,1);
					//}

					if(!me.loaded){
						var p = me.parent;			
						if(p&&!p.opened&&p.level>=0){
							p.expand();
						}
						this.refresh(1);
						this.loaded=true;
					}else{
						this.refresh(0);
					}
					this.container.style.display = "";
					treeview.prototype.onnodeexpand(this);
				}
			}			
		}
		//collapse the node
		this.collapse = function(){
			this.opened= false;
			treeview.prototype.onnodecollapse(this);
			//if(Global.cookieless==false){
			//	setCookie("Node"+this.id,0);
			//}
			this.container.style.display = "none";
			this.refresh(0);
		}
		this.toggle = function(){
			if(this.nodes.length>0){
				if(!this.opened){
					this.expand();
				}else{
					this.collapse();
				}
			}
		}
		//node is my parent
		this.isParent = function(node){
			var p = me.parent;
			while(p!=null){
				if(p==node){
					return true;
				}
				p = p.parent;
			}
			return false;			
		}
		this.setIndent = function(level,value){
			this.indent[level] = value;
			for(var i=0;i<this.nodes.length;i++){				
				this.nodes.items[i].indent[level] = value;
				if(this.nodes.items[i].showed){					
					var ic = this.nodes.items[i].baseNode.childNodes;				
					for(var j=0;j<this.nodes.items[i].indent.length-1;j++){
						if(ic[j].tagName=="IMG"){
							ic[j].src	= this.nodes.items[i].indent[j]?control.Ficons.blank.src:control.Ficons.line.src;
						}
					}
				}
				this.nodes.items[i].setIndent(level,value);
			}			
		}
		this.select = function(){
			if(this.parent){		
				this.parent.expand();
			}

			var oNode = this.textNode;
				if(oNode){
					oNode.className = "Node-selected";
					var of = oNode.firstChild;
					
					try{of.focus();}catch(e){}
				}						
		}
		this.unselect = function(){
			if(this.showed){
				var oNode = this.textNode;
					if(oNode){
						oNode.className = "Node-unselect";
						oNode.firstChild.blur();
					}
			}
		}

		this.refresh = function(loadchild){
			if(this.showed){
				if(loadchild){
					//reload all children
					for(var j=0;j<this.nodes.length;j++){ 				
						this.container.appendChild(this.nodes.items[j].toString());
						this.container.style.display=this.opened?"":"none";					
					}			
				}
				//reload me
				if(this.handleNode){
					this.handleNode.src = me.nodes.length>0?(me.opened?(me.level>0?(me.isLast?control.Ficons.minusbottom.src:control.Ficons.minus.src):(me.isLast?control.Ficons.minusbottom.src:control.Ficons.rminus.src)):(me.level>0?(me.isLast?control.Ficons.plusbottom.src:control.Ficons.plus.src):(me.isLast?control.Ficons.plusbottom.src:control.Ficons.rplus.src))):(me.level>0?(me.isLast?control.Ficons.joinbottom.src:control.Ficons.join.src):me.isLast?control.Ficons.joinbottom.src:control.Ficons.join.src);
				}
				if(this.folderNode){
					if (!this.icon){
						this.folderNode.src = this.nodes.length>0?(this.opened?control.Ficons.open.src:control.Ficons.close.src):control.Ficons.file.src;
					}
				}
			}
		}
		//move to be my child
		this.moveToChild = function(node){
			if(node){
				if(this.isParent(node)==false){
					if(this.opened){
						this.expand();
					}
					var c = node.clone();
							node.remove();

					this.add(c);				
				}
			}
		}
		this.clone = function(){
			var c = new node(this.caption,this.title,this.url,this.target,this.tag);
				copy(this,c);				
				function copy(src,obj){
					for(var i=0;i<src.nodes.length;i++){
						var s = src.nodes.items[i];
						var z = new node(s.caption,s.title,s.url,s.target,s.tag);
							z.loaded = false;							
							obj.add(z);
						if(s.nodes.length){
							arguments.callee(s,z);
						}
					}		
				}
				return c;
		}
		this.firstChild = function(){
			if(this.nodes.length>0){
				return this.nodes.items[0];
			}else{
				return null;
			}
		}
		this.lastChild = function(){
			if(this.nodes.length>0){
				return this.nodes.items[this.nodes.length-1];
			}else{
				return null;
			}
		}
		this.next = function(){
			var p = this.parent;
			for(var i=0;i<p.nodes.length;i++){
				if(p.nodes.items[i] == this){
					if(i<p.nodes.length-1){
						return p.nodes.items[i+1];
					}
				}
			}
			return null;
		}
		this.previous = function(){
			var p = this.parent;
			for(var i=0;i<p.nodes.length;i++){
				if(p.nodes.items[i] == this){
					if(i>0){
						return p.nodes.items[i-1];
					}
				}
			}
			return null;
		}
	}

	var tv = new treeview("treeview","tree",true,true);
	var b = new node("文件夹开始","","","dsf");
	var c = new node("hello");
	var d = new node("ds");

		treeview.prototype.onnodeclick = function(sender){
			//alert("caption:" + sender.caption + ",id:" + sender.id + ",deepth:" + sender.level + ",tag:" + sender.tag);
			//alert("islast:" + sender.isLast +",indent:" + sender.indent);		
//			alert(sender.baseNode.outerHTML);
			return false;
		}
		
		treeview.prototype.onnodecheck = function(sender){alert(sender.caption + " selected:" + sender.checked);}
		treeview.prototype.onselectchange = function(before,after){
		//	if(before)
		//		alert(before.caption + "," + after.caption);
		//	else
		//		alert(after.caption);
		}

//		treeview.prototype.onnodekeydown = function(sender,e){var e = event||e;alert(e.keyCode);}
		treeview.prototype.onnodedrag		= function(from,to){
			to.moveToChild(from);
		}

		tv.add(b);
		b.add(c);
		tv.add(new node("mid","","","","","",true));

		b.add(d);
	
		d.add(new node("dsf"));

	var x = new node("sdjlj");
		
		d.add(x);
		x.add(new node("dsf"));
		x.add(new node("dsf"));

	var t =  new node("sdfs");
		x.add(t);		

		tv.insert(1,new node("插入测试"));

	var k = new node("文件夹结尾");
		tv.add(k);

		k.add(new node("sdfsff"));


		function add(){
			var nn = tv.selected;
			if(!nn)nn=tv;

			for(var i=0;i<3;i++){
				nn.add(new node(i+""));
			}
		}

		function insert(nn){
			var nn = tv.selected;
			if(!nn)nn=tv;

			for(var i=0;i<3;i++){
				nn.insert(0,new node(i+""));
			}		
		}

		tv.create(document.getElementById("tree"));

  //-->
  </SCRIPT>

	<p>
		<input type=button onclick="if(tv.selected)tv.selected.setCaption('设置标题');" value="设置标题">
		<input type=button onclick="if(tv.selected)tv.selected.remove()" value="删除选中节点">
		<input type=button onclick="if(tv.selected)alert('你选择的节点是：' +tv.selected.caption)" value="显示选择的节点">
		<input type=button onclick="insert()" value="插入节点">
		<input type=button onclick="add()" value="增加节点">
		<input type=button onclick="if(tv.nodes.items[0])tv.nodes.items[0].select()" value="选择首节点">
		<input type=button onclick="if(tv.selected){var o =tv.selected.previous();if(o)o.select();}" value="上一个节点">
		<input type=button onclick="if(tv.selected){var o =tv.selected.next();if(o)o.select();}" value="下一个节点">
		<input type=button onclick="if(tv.selected){alert(tv.selected.parent.caption);}" value="父节点">		
		<input type=button onclick="tv.drag=!tv.drag;this.value = (tv.drag?'':'不') +'允许拖放';" value="不允许拖放">		
		<input type=button onclick="if(tv.selected){tv.selected.edit();}" value="编辑节点">
	</p>
 </BODY>
</HTML>