tree.js

动态加载树

var Tree=new function(){
	this.url="/dynamicTree/tree.do";
	this.openMark="<img src='/dynamicTree/images/big_minus.gif'/>--<img src='/dynamicTree/images/folderopen.gif'/>";
	this.closeMark="<img src='/dynamicTree/images/big_plus.gif'/>--<img src='/dynamicTree/images/fold2k_close.gif'/>";
	this.itemMark="<img src='/dynamicTree/images/file_image.gif'/>";
	
	this.initId="treeInit";
	this.rootData="root";
	this.boxSuffix="_childrenBox";
	this.folderType="folder";
	this.itemType="item";

	this.init=function(){
		var initNode=document.getElementById("treeInit");
		var node=document.createElement("div");
		node.id="0";
		node.innerHTML=this.createItemHTML(node.id,this.folderType,this.rootData,null);
		initNode.appendChild(node);
	}
	this.createItemHTML=function(itemId,itemType1,itemData,itemLink){
		if (itemType1==this.itemType) {
			return '<span class="itemMark">'+this.itemMark+'</span>'+
			'<span class="item" onclick="Tree.clickItem(\''+itemLink+'\')">'+itemData+'</span>';
		}else if (itemType1==this.folderType) {
			return '<span class="folderMark" onclick="Tree.getChildren('+itemId+')">'+this.closeMark+'</span>'+
			'<span class="folder" onclick="Tree.getChildren('+itemId+')">'+itemData+'</span>';
		}
	}
	
	this.clickItem=function(link1){
		alert(link1);
	}
	this.getChildren=function(pid){
		var childBox=document.getElementById(pid+this.boxSuffix);
		if (childBox) {
			var isHidden=(childBox.style.display=="none");
			childBox.style.display=isHidden?"":"none";
			
			var pNode=document.getElementById(pid);
			pNode.firstChild.innerHTML=isHidden?this.openMark:this.closeMark;
		}else{
			var XMLHttpReq=this.createXMLHttpRequest();
			XMLHttpReq.onreadystatechange=function(){
				if (XMLHttpReq.readyState==4) {
					if (XMLHttpReq.status==200) {
						Tree.addChildren(pid,XMLHttpReq.responseXML);
					}
					else {
						alert("error");
					}
				}
			}
			XMLHttpReq.open("GET",this.url+"?pid="+pid,true);
			XMLHttpReq.send(null);
		}
	}
	
	this.createXMLHttpRequest=function(){
		var XMLHttpReq;
		if(window.XMLHttpRequest)
		{
			XMLHttpReq=new XMLHttpRequest();
		}
		else if(window.ActiveXObject)
		{
			try
			{
				XMLHttpReq=new ActiveXObject("Msxml2.XMLHTTP");
			}catch(e)
			{
				try
				{
					XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
				}catch(e){}
			}
		}
		return XMLHttpReq;
	}
	
	this.addChildren=function(pid,data){
		//event.cancelBubble=true;//
		var pNode=document.getElementById(pid);
		pNode.firstChild.innerHTML=this.openMark;
		
		var nodeBox=document.createElement("div");
		nodeBox.id=pid+this.boxSuffix;
		pNode.appendChild(nodeBox);
		
		var children=data.getElementsByTagName("tree")[0].childNodes;
		var child=null;
		var childType=null;
		
		for ( var i = 0; i < children.length; i++) {
			child=children[i];
			var node=document.createElement("div");
			node.id=child.getAttribute("id");
			childType=child.getAttribute("isFolder")=="true"?this.folderType:this.itemType;
			
			if (childType==this.itemType) {
				node.innerHTML=this.createItemHTML(node.id, childType, child.firstChild.data, child.getAttribute("link"));
			}else{
				node.innerHTML=this.createItemHTML(node.id, childType, child.firstChild.data, null);
			}
			nodeBox.appendChild(node);
		}
	}
}