tree.js

1、用SQL查询器打开install目录下的dooogo.sql运行之后创建数据库dooogo。 2、然后打开web.config修改 <DbProvider type="Club.Fram


function clickNode(){
	this.obj		=null;
	this.caption	=null;
	this.level		=null;
	this.value		=null;
}
function JTree(pParent,xmlFile){
	this.PICPATH	=	"JTree/"	//图片文件所在的文件夹，可见public，可改变。
	
	var self		=this;	//相当于一个引用，指向自己。JTree.
	//-----------------------------------------------------------------------------
	//不可见private。
	//常量
	var JOIN		=	this.PICPATH +	"join.gif";
	var JOINBOTTOM	=	this.PICPATH +	"joinBottom.gif";
	var MINUS		=	this.PICPATH +	"minus.gif";
	var MINUSBOTTOM	=	this.PICPATH +	"minusBottom.gif";
	var PLUS		=	this.PICPATH +	"plus.gif";
	var PLUSBOTTOM	=	this.PICPATH +	"plusBottom.gif";
	var EMPTY		=	this.PICPATH +	"empty.gif";
	var LINE		=	this.PICPATH +	"line.gif";
	
	var LEAFICON	=	this.PICPATH +	"page.gif";
	var NODEICON	=	this.PICPATH + 	"folder.gif";
	
	var OPEN		=new Array();
		OPEN[true]	=MINUS;
		OPEN[false]	=PLUS;
	
	var OPENBOTTOM			=new Array();
		OPENBOTTOM[true]	=MINUSBOTTOM;
		OPENBOTTOM[false]	=PLUSBOTTOM;
	
	this.setPicPath=function(pPath){
		self.PICPATH=pPath;
		
		JOIN		=	self.PICPATH +	"join.gif";
		JOINBOTTOM	=	self.PICPATH +	"joinBottom.gif";
		MINUS		=	self.PICPATH +	"minus.gif";
		MINUSBOTTOM	=	self.PICPATH +	"minusBottom.gif";
		PLUS		=	self.PICPATH +	"plus.gif";
		PLUSBOTTOM	=	self.PICPATH +	"plusBottom.gif";
		EMPTY		=	self.PICPATH +	"empty.gif";
		LINE		=	self.PICPATH +	"line.gif";
			
		OPEN[true]	=MINUS;
		OPEN[false]	=PLUS;
		
		OPENBOTTOM[true]	=MINUSBOTTOM;
		OPENBOTTOM[false]	=PLUSBOTTOM;
		
		LEAFICON	=	self.PICPATH +	"page.gif";
		NODEICON	=	self.PICPATH + 	"folder.gif";
	}
	
	this.CAPTIONATT	=	"caption";//标题属性是哪一个属性
	this.ICONATT	=	"icon";//图标属性
	this.EXPANDALL	=	true;//是否全部扩展。
	
	//this.clickItem=new clickNode;
	this.clickItem=new clickNode;//用于点击时，返回值。
	this.selectNode=null;//同上
	
	this.onclick=null;
	this.onmouseover=null;
	this.onmouseout=null;
	//-----------------------------------------------------------------------------
	//跟据ID得到OBJ
	var $=function(pObjID){
		return document.getElementById(pObjID)
	}			
	//-----------------------------------------------------------------------------
	this.body=$(pParent) || document.body;
	//-----------------------------------------------------------------------------
	//生XML对象。
	var createXMLDom=function(){
		if (window.ActiveXObject) 
			var xmldoc=new ActiveXObject("Microsoft.XMLDOM");
		else 
			if (document.implementation&&document.implementation.createDocument)
				var xmldoc=document.implementation.createDocument("","doc",null);
		xmldoc.async = false;
		//为了和FireFox一至，这里不能改为False;
		xmldoc.preserveWhiteSpace=true;
		return xmldoc;
	}
		
	//-----------------------------------------------------------------------------
	//加载XML文件。
	var xmlDom=createXMLDom();
		xmlDom.load(xmlFile);
	//注：FF不支持xml
	//alert(xmlDom.documentElement.childNodes[1].xml);
	var DOMRoot=xmlDom.documentElement;
	//for(o in DOMRoot){
	//	document.write(o+" = " + DOMRoot.eval(o)+"<br>");
	//}
	//FF和IE都支持下面这个方法取属性的内容。
	//alert(root.attributes.getNamedItem("caption").nodeValue);
	//-----------------------------------------------------------------------------
	//取出指定节点的属性。
	var getDOMAtt=function(pNode,pAttribute){
		try{
			return pNode.attributes.getNamedItem(pAttribute).nodeValue;
		}catch(e){
			//alert("指定节点不存在，或指定属性："+pAttribute+" 不存在!")
			return false;
		}
		
	}
	//alert(getAttribute(root,"caption"));
	//-----------------------------------------------------------------------------
	//新建HTML标签。
	var createTag=function(pTagName){
		return document.createElement(pTagName)
	}
	var createImg=function(pSrc){
		var tmp=createTag("IMG");
		tmp.align	="absmiddle";
		tmp.src		=pSrc;
		tmp.onerror=function(){
			try{this.parentNode.removeChild(this);}catch(e){}
		}
		return tmp;
	}


	var createCaption=function(pNode,pLevel){
		var tmp=createTag("SPAN");
		tmp.innerHTML=getDOMAtt(pNode,self.CAPTIONATT);
		tmp.className="caption";
		tmp.onmouseover=function(){
			if(this.className!="captionHighLight")
				this.className="captionActive";
			try{self.onmouseover()}catch(e){}//必须加上
		}
		tmp.onmouseout=function(){
			if(this.className!="captionHighLight")
				this.className="caption";
			try{self.onmouseout()}catch(e){}//必须加上
		}
		tmp.onclick=function(){
			try{
				self.clickItem.obj.className="caption";
			}catch(e){
				//
			}
			this.className="captionHighLight";
			
			//alert(self);
			var clickItem=new clickNode;
			
			clickItem.obj		=tmp;
			clickItem.caption	=getDOMAtt(pNode,self.CAPTIONATT);
			clickItem.level		=pLevel
			
			self.clickItem=clickItem;
			self.selectNode=pNode;
			try{self.onclick();}catch(e){}//必须加上，如果self没有对onclick赋值的话，会引发错误。
		}
		return tmp;
	}

	var createTreeLine=function(pNode,pParentArea){
		var hasChildren=pNode.hasChildNodes();//是否有孩子。		
		for(var i=0;i<pParentArea.level;i++){
			var tmpArea=pParentArea;		
			for(var j=pParentArea.level;j>i;j--){
				//tmpArea=tmpArea.parentNode;
				tmpArea=tmpArea.parentNode.parentNode;
			}
			
			if(tmpArea.isLastChild)
				appendTo(createImg(EMPTY),pParentArea);
			else
				appendTo(createImg(LINE),pParentArea);
		}
				
		if(hasChildren){//有孩子
			var childShowBtn;
			if(!pParentArea.isLastChild){	
				childShowBtn=createImg(OPEN[false]);//创建ICO
				appendTo(childShowBtn,pParentArea);
			}else{
				childShowBtn=createImg(OPENBOTTOM[false]);//创建底部ICO
				appendTo(childShowBtn,pParentArea);
			}
			childShowBtn.onclick=function(){
				var isExpand=this.parentNode.expand();
								
				if(!pParentArea.isLastChild){
					this.src=OPEN[isExpand];
				}else{
					this.src=OPENBOTTOM[isExpand];
				}
				
			}
		}else{//无孩子。
			if(!pParentArea.isLastChild)	
				appendTo(createImg(JOIN),pParentArea);
			else
				appendTo(createImg(JOINBOTTOM),pParentArea);			
		}
	}
	
	var createIcon=function(pNode,pParentArea){
		var hasChildren=pNode.hasChildNodes();//是否有孩子
		var tmpIcon=getDOMAtt(pNode,self.ICONATT);
		if(tmpIcon==false){
			if(hasChildren)
				appendTo(createImg(NODEICON),pParentArea);
			else
				appendTo(createImg(LEAFICON),pParentArea);
		}else{
			appendTo(createImg(tmpIcon),pParentArea);
		}		
	}
	//-----------------------------------------------------------------------------
	//将指定OBJ追加到某个OBJ的最后面。
	var appendTo=function(pObj,pTargetObj){
		try{
			pTargetObj.appendChild(pObj);
		}catch(e){
			alert(e.message);
		}
	}
	//-----------------------------------------------------------------------------
	var isFirstChild=function(pNode){
		//除了空白节点之外，是否是第一个节点
		var tmpNode=pNode.previousSibling;
		while(tmpNode.previousSibling!=null && tmpNode.nodeType!=1)
			tmpNode=tmpNode.previousSibling;
		if(tmpNode.nodeType==3)//是空节点
			return true;
		else
			return false;
	}
	var isLastChild=function(pNode){
		tmpNode=pNode.nextSibling;
		while(tmpNode.nextSibling!=null && tmpNode.nodeType!=1)
			tmpNode=tmpNode.nextSibling;
		if(tmpNode.nodeType==3)//是空节点
			return true;
		else
			return false;		
	}
	//-----------------------------------------------------------------------------
	//循环绘制各节点。从下面这些起，这些节点具有收缩功能，所以，下面的这些不应该被oRoot所包含，而应该是oOutLine的孩子。
	var createSubTree=function(pNode,pLevel,pNodeArea){
		var subNode;
		for(var i=0;subNode=pNode.childNodes[i];i++){			
			if(subNode.nodeType!=1) continue;//由于默认了把空白也当着一个节点来处理，所以，这里要判断一下。
			
			var subNodeItem		=createTag("DIV")
			
			if(subNode.hasChildNodes())
				var subNodeSubArea	=createTag("DIV");
				
				subNodeItem.level		=pLevel+1;
				subNodeItem.isFirstChild=isFirstChild(subNode);
				subNodeItem.isLastChild	=isLastChild(subNode);
			//下面的这个位置不能变动，因为createTreeLine里用到了它的parentNode
			appendTo(subNodeItem,pNodeArea);
			
			createTreeLine(subNode,subNodeItem);
			createIcon(subNode,subNodeItem);
			var subNodeCaption	=createCaption(subNode,pLevel+1);
			appendTo(subNodeCaption,subNodeItem);
			
			if(subNode.hasChildNodes()){
				//createSubTree(subNode,pLevel+1,subNodeItem);
				appendTo(subNodeSubArea,subNodeItem);
				createSubTree(subNode,pLevel+1,subNodeSubArea);
				subNodeItem.subNodeSubArea=subNodeSubArea;
				
				subNodeItem.expand=function(){
					//如果状态是展开，返回真，否则返回假。
					//this.subNodeSubArea.style.display=="" ? this.subNodeSubArea.style.display="none" : this.subNodeSubArea.style.display="";
					if(this.subNodeSubArea.style.display==""){
						this.subNodeSubArea.style.display="none";
						return false;
					}else{
						this.subNodeSubArea.style.display="";
						return true;	
					}
				};
				//级别大于10关闭
				if(i>10)
				{
					var isExpand=subNodeItem.expand();
				}
				
			}
		}
	}
	
	
	this.expandByLevel=function(pLevel){
			
	}
	
	this.create=function(){
		//-----------------------------------------------------------------------------
		//绘制轮廓
		var oOutLine=createTag("DIV");
		oOutLine.className="outLine";
		appendTo(oOutLine,this.body);
		//oOutLine.onclick=this.onclick;
		//-----------------------------------------------------------------------------
		//绘制根。这个根不具备收缩的功能。
		var oRoot		=createTag("DIV");
			
			oRoot.level	=-1;//级别。根的级别为-1;
	
		var oRootIcon	=createImg(getDOMAtt(DOMRoot,self.ICONATT));	
		//var oRootCaption=createCaption(getDOMAtt(DOMRoot,self.CAPTIONATT),-1);
		var oRootCaption=createCaption(DOMRoot,-1);
		appendTo(oRootIcon,oRoot);
		appendTo(oRootCaption,oRoot);
		appendTo(oRoot,oOutLine);
		//------------------------------------------------------------------------------		
		createSubTree(DOMRoot,-1,oOutLine);
	}
}