tree.js

一个用ajax写的动态树.实现无限级的树.

/*生成ajax目录树对象
*最后节点用方法createItemHTML的参数lastNode值为"last"标识
*/


var Tree=new function(){
	this.url = "/MyWeb/testservlet";  //用于请求数据的服务器地址;
	this.action = "tree";//提交servlet时的参数
	this.target = "_self"; //点击节点时目标构架
	this.frm = ""; //提交的表单
	this.openMark = "/MyWeb/img/minus.gif";	//目录节点展开时的图标
	this.closeMark = "/MyWeb/img/plus.gif";	//目录节点关闭时的图标
	this.itemMark = "/MyWeb/img/join.gif";	//非目录节点图标
	this.openBottom = "/MyWeb/img/minusbottom.gif"; //最下面目录节点展开时的图标
	this.closeBottom = "/MyWeb/img/plusbottom.gif"; //最下面目录节点关闭时的图标
	this.itemBottom = "/MyWeb/img/joinbottom.gif";  //最下非目录节点的图标
	this.spaceMark = "/MyWeb/img/line.gif";  //空白处的图标
	
	this.folderMark = "/MyWeb/img/folder.gif"; //目录图标
	this.folderOpen = "/MyWeb/img/folderopen.gif"; //目录展开时的图标
	this.pageMark = "/MyWeb/img/page.gif"; //非目录图标
	
	this.initId = "treeInit";	//目录树初始div的id
	this.rootData = "根目录";	//根目录信息	
	this.rootId = "0";   //根目录id
	
	this.moverColor = "#FF7F50"; //鼠标在节点上时的字体颜色
	this.moutColor = "#666000"; //鼠标离开节点时字体的颜色
	this.clickBKC = "#FFFF00"; //鼠标点击节点时背景色
	/*以上属性可在引用页面上修改*/
	/*以下变量属性不可修改*/
	this.boxSuffix = "_childrenBox";	//子节点容器id后缀 
	this.imgSuffix = "_img";	//目录节点或非目录节点图片id后缀
	this.folderSuffix = "_imgf"; //目录或非目录图片id后缀
	this.textSuffix = "_text"; //节点文本id后缀
	
	this.folderType = "folder";		//目录节点类型变量
	this.itemType = "item";		//非目录节点类型变量
	
	this.left = -20;
	this.curid = null;
	//初始化根节点
	this.init = function(){
		var initNode = document.getElementById(this.initId);	//获得初始div
		var node = document.createElement("div");	//创建新div作为根节点
		node.id = this.rootId;
		node.className="root";
		node.innerHTML = this.createItemHTML(node.id,this.folderType,this.rootData,"#","last");
		initNode.appendChild(node);
	}
	
	//获得给定节点的子节点
	this.getChildren = function(parentId){
		Tree.changeBKC(parentId);
		//获取子节点容器的box
		var childBox = document.getElementById(parentId+this.boxSuffix);
		//如果子节点容器已经存在,则直接显示,否则从服务器上取
		if(childBox){
			var isHidden = (childBox.style.display == "none");
			childBox.style.display = isHidden?"":"none";
			//修改父节点图标,根据是否是最下面节点更换图片
			//var parentNode = document.getElementById(parentId);
			//parentNode.firstChild.innerHTML = isHidden?this.openMark:this.closeMark; 
			var imgNode = document.getElementById(parentId+this.imgSuffix);
			if(imgNode.src.indexOf(this.openBottom)>0 || imgNode.src.indexOf(this.closeBottom)>0){
				imgNode.src = isHidden?this.openBottom:this.closeBottom;
			}else{
				imgNode.src = isHidden?this.openMark:this.closeMark;
			}
			var folderNode = document.getElementById(parentId+this.folderSuffix);
			folderNode.src = isHidden?this.folderOpen:this.folderMark;
		}else{
			var xmlHttp=this.createXmlHttp();
			xmlHttp.onreadystatechange=function(){
				if(xmlHttp.readyState==4){
					Tree.addChildren(parentId,xmlHttp.responseText);
				}
			}
			xmlHttp.open("GET",this.url+"?action="+this.action+"&pid="+parentId,true);
			xmlHttp.send(null);
		}
	}
	
	this.createXmlHttp=function(){
		var xmlHttp = null;
		if(window.XMLHttpRequest){
			xmlHttp=new XMLHttpRequest();
		}else{
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		return xmlHttp;
	}
	
	//根据返回的信息,设置指定节点的子节点
	this.addChildren = function(parentId,data){
		var parentNode = document.getElementById(parentId);
		//parentNode.firstChild.innerHTML = this.openMark;
		//根据图片路径判断是不是最后一个节点,以修改图片
		var imgNode = document.getElementById(parentId+this.imgSuffix);
		var str = "";
		var isLast = "false";
		if(imgNode.src.indexOf(this.closeBottom)>0){
			imgNode.src = this.openBottom;
			isLast = "true";
		}else{
			imgNode.src = this.openMark;		
		}
		var folderNode = document.getElementById(parentId+this.folderSuffix); //目录打开图标
		folderNode.src = this.folderOpen;
		//创建一个容器,用于存放所有子节点
		var nodeBox = document.createElement("div");
		//容器id规则:在父节点id后加固定后缀
		nodeBox.id = parentId+this.boxSuffix;
		nodeBox.className = "box";
		parentNode.appendChild(nodeBox);
		//获取所有item节点
		var child = null;
		var childType = null;
		eval("var children="+data);
		for(var i=0;i<children.length-1;i++){
			child = children[i];
			node = document.createElement("div");
			node.id = child.id
			childType = child.isfolder=="true"?this.folderType:this.itemType;
			node.innerHTML = this.spaceHTML(nodeBox,1,isLast);
			//根据节点不同,调用crateItemHTML创建节点
			if(childType == this.itemType){
				node.innerHTML = node.innerHTML+ this.createItemHTML(node.id,childType,child.name,child.link);
			}else{
				node.innerHTML = node.innerHTML+this.createItemHTML(node.id,childType,child.name);
			}
			nodeBox.appendChild(node);
		}
		//最后一个节点单独处理
		child = children[children.length-1];
		node = document.createElement("div");
		node.id = child.id
		childType = child.isfolder == "true"?this.folderType:this.itemType;
		node.innerHTML = this.spaceHTML(nodeBox,1,isLast);
		if(childType == this.itemType){
				node.innerHTML = node.innerHTML+ this.createItemHTML(node.id,childType,child.name,child.link,"last");
		}else{
				node.innerHTML = node.innerHTML+ this.createItemHTML(node.id,childType,child.name,"#","last");
		}
		nodeBox.appendChild(node);
		this.count = this.count+1;
	}
	
	//创建空白处的图片
	this.spaceHTML = function(node,i,isLast){
		var str = "";
		var tmp;
		var margin = i*this.left;
		var id = node.parentNode.parentNode.id;
		str = '<span class="itemMark"><img src="'+this.spaceMark+'" class="imgcl" style="margin-left:'+margin+'px"/></span>';
		var len = str.length;
		if(id != (this.rootId+this.boxSuffix) && id != this.initId){
			tmp = document.getElementById(id);
			var imgsrc = document.getElementById((tmp.parentNode.id)+this.imgSuffix).src;
			//判断是不是最下面的节点
			if(imgsrc.indexOf(this.openBottom)>0){
				str = this.spaceHTML(tmp,i+1,"true")+str;
			}else{
				str = this.spaceHTML(tmp,i+1,"false")+str;
			}
		}else{
			str = '<span class="itemMark"><img src="'+this.spaceMark+'" class="imgcl" style="margin-left:'+margin+'px"/></span>';
		}
		if(isLast == "true"){
			str = str.substring(0,str.length-len);
		}
		return str;
	}
	
	//创建节点的页面代码
	this.createItemHTML = function(itemId,itemType,itemData,itemLink,lastNode){
		//根据节点类型不同,返回不同的html代码
		if(itemType == this.itemType){
			//非目录节点
			//var str = '<span class="itemMark">'+this.itemMark+'</span>';
			var imgURL;
			//根据是否最后一个节点来添加图标
			if(lastNode == "last"){
				imgURL = this.itemBottom;
			}else{
				imgURL = this.itemMark;
			}
			var str = '<span onmouseover="Tree.mOver(\''+itemId+'\')" onmouseout="Tree.mOut(\''+itemId+'\')" onclick="Tree.clickItem(\''+itemLink+'\');">';
			str = str+'<span class="itemMark"><img id="'+itemId+this.imgSuffix+'" src="'+imgURL+'" class="imgcl" /></span>';
			str = str+'<span class="custom"><img id="'+itemId+this.folderSuffix+'" src="'+this.pageMark+'" class="imgcl" /></span>';//添加非目录图标
			str = str+'<span class="item" id="'+itemId+this.textSuffix+'">'+itemData+'</span>';
			str = str+'</span>';
			return str;
		}else if(itemType == this.folderType){
			//var str = '<span class="folderMark" onclick="Tree.getChildren(\''+itemId+'\')">'+this.closeMark+'</span>';
			var imgURL;
			if(lastNode == "last"){
				imgURL = this.closeBottom;
			}else{
				imgURL = this.closeMark;
			}
			var str = '<span onmouseover="Tree.mOver(\''+itemId+'\')" onmouseout="Tree.mOut(\''+itemId+'\')" onclick="Tree.getChildren(\''+itemId+'\')">';
			str = str+'<span class="folderMark" ><img id="'+itemId+this.imgSuffix+'" src="'+imgURL+'" class="imgcl" /></span>';
			str = str+'<span class="custom"><img id="'+itemId+this.folderSuffix+'" src="'+this.folderMark+'" class="imgcl" /></span>'; //添加目录图标
			str = str+'<span class="folder" id="'+itemId+this.textSuffix+'">'+itemData+'</span>';
			str = str+'</span>';
			return str;
		}
	}
	
	//鼠标经过节点时的效果
	this.mOver = function(id){
		var el = document.getElementById(id+this.textSuffix);
		el.style.color = this.moverColor;
	}
	
	//鼠标离开节点时的效果
	this.mOut = function(id){
		var el = document.getElementById(id+this.textSuffix);
		el.style.color = this.moutColor;
	}
	
	//点击时,改变背景色
	this.changeBKC = function(id){
		if(this.curid != null){
			var el = document.getElementById(this.curid+this.textSuffix);
			el.style.backgroundColor="#FFFFFF";
		}
		var el = document.getElementById(id+this.textSuffix);
		el.style.backgroundColor= this.clickBKC;
		this.curid = id;
	}
	//单击叶子的动作
	this.clickItem = function(link){
		//alert("sucess");
		var frm = document.getElementById(this.frm);
		frm.action = link;
		frm.target = this.target;
		frm.submit();
	}
}