treeview.js

网站开发模板框架 网站开发模板 网站开发模板 网站开发模板框架

function TreeView(obj,rootnode,target,checkboxName,formName,checkbox){
	this.obj=obj;
	this.target=target?target:'_blank';
	this.root=new node(rootnode);
	this.nodes=[]
	this.currentNode=null;
	this.html=""
	this.check=true
	this.checkbox=checkbox?true:false
	this.formName=formName?formName:'frm'
	this.checkboxName=checkboxName?checkboxName:'id'
	this.config={
		root		:'js/tree/standard/image/base.gif',
		open		:'js/tree/standard/image/open.gif',
		close		:'js/tree/standard/image/close.gif',
		file		:'js/tree/standard/image/file.png',
		join		:'js/tree/standard/image/join.png',
		joinbottom	:'js/tree/standard/image/joinbottom.png',
		plus		:'js/tree/standard/image/plus.png',
		plusbottom	:'js/tree/standard/image/plusbottom.png',
		minus		:'js/tree/standard/image/minus.png',
		minusbottom	:'js/tree/standard/image/minusbottom.png',
		blank		:'js/tree/standard/image/empty.png',
		line		:'js/tree/standard/image/line.png'
	}
	for(i in this.config){var tem=this.config[i];this.config[i]=new Image();this.config[i].src=tem}
}

function node(id,pid,txt,link,title,target,open,check,imgclose,imgopen,imgfile,lastlink){

	this.id=id
	this.check=check
	this.pid=pid
	this.txt=txt
	this.link=link
	this.title=title
	this.target=target
	this.indent=""
	this.lastNode=false
	this.open=open
	this.hasNode=false
	this.imgclose=imgclose
	this.imgfile=imgfile
	this.imgopen=imgopen
	this.lastlink=lastlink
	
}

TreeView.prototype.getP=function(nid){
		var nNode=this.nodes[nid]
		for(var i=0;i<this.nodes.length;i++)
			if(this.nodes[i].id==nNode.pid)return i
		return null
}

TreeView.prototype.add=function(id,pid,txt,link,open,check,imgclose,imgopen,title,target,lastlink){
	var itemTxt=txt?txt:"New Item"
	var itemLink=check?(link?link:''):''//NoPrivilege.jsp
	var itemTitle=title?title:itemTxt;
	var itemTarget=target?target:this.target;
	var itemOpen=open?true:false;
	var itemcheck=check?true:false
	var itemimgclose=imgclose?imgclose:this.config.close.src
	var itemimgopen=imgopen?imgopen:(imgclose?imgclose:this.config.open.src)
	var itemimgfile=imgclose?imgclose:this.config.file.src
	var itemlastlink=lastlink?lastlink:link;
	this.nodes[this.nodes.length]=new node(id,pid,itemTxt,itemLink,itemTitle,itemTarget,itemOpen,itemcheck,itemimgclose,itemimgopen,itemimgfile,itemlastlink)
	pid==this.root.id?this.nodes[this.nodes.length-1].open=true:''
}

TreeView.prototype.DrawTree=function(pNode){
	var str=""
	for(var i=0;i<this.nodes.length;i++){
		if(this.nodes[i].pid==pNode.id){
		str+=this.DrawNode(i)
		}
	}
	return str
}

TreeView.prototype.ChkPro=function(pNode){
	var last;
	for(var n=0;n<this.nodes.length;n++){
		if(this.nodes[n].pid==pNode.id)pNode.hasNode=true;
		if (this.nodes[n].pid == pNode.pid) last= this.nodes[n].id;
	}
	if (last==pNode.id) pNode.lastNode = true;
}

TreeView.prototype.DrawNode=function(nid){
	var str=""
	var nNode=this.nodes[nid]
	this.DrawLine(nNode,nNode)
	if(nNode.hasNode)nNode.indent+="<a  href='' onclick='"+this.obj+".Click("+nid+",this);return(false)'>"
	nNode.indent+=this.root.id!=nNode.pid?("<img align='absmiddle' src='"+(nNode.lastNode?(nNode.hasNode?(nNode.open?this.config.minusbottom.src:this.config.plusbottom.src):this.config.joinbottom.src):(nNode.hasNode?(nNode.open?this.config.minus.src:this.config.plus.src):this.config.join.src))+"' id='icon"+this.obj+nid+"'>"):""
	nNode.indent+="<img  id='folder"+this.obj+nid+"' align='absmiddle' src='"+(nNode.pid==this.root.id?nNode.imgopen:(nNode.hasNode?(nNode.open?nNode.imgopen:nNode.imgclose):nNode.imgfile))+"' style='filter:"+  (nNode.check?"":"Gray") +"'>"+(nNode.hasNode?"</a>":"")
	str+="<div class='node'><nobr>"+nNode.indent+this.DrawLink(nid)+"</nobr></div>"
	if(nNode.hasNode){
	str+="<div id='Child"+this.obj+nid+"' style='display:"+(nNode.open?'':'none')+"'>"
	str+=this.DrawTree(nNode)
	str+="</div>"
	}
	return str;
}


TreeView.prototype.DrawLine=function(nNode,tem){
	for(var i=1;i<this.nodes.length;i++){
		if(this.nodes[i].id==tem.pid){
		nNode.indent="<img align='absmiddle' src='"+(this.nodes[i].lastNode?this.config.blank.src:this.config.line.src)+"'>"+nNode.indent
		this.DrawLine(nNode,this.nodes[i])
		}
	}
}

TreeView.prototype.Click=function(nid,oLink){
	var nNode=this.nodes[nid]
	if(!nNode.hasNode)return;
	if(nNode.open)this.collapse(nid)
	else this.expand(nid)
	if(oLink)oLink.blur()
}

TreeView.prototype.selected=function(nid){
	if(this.currentNode==null)this.currentNode=nid;
	var current=document.getElementById('node'+this.obj+this.currentNode)
	var node=document.getElementById('node'+this.obj+nid)
	current.className='normal'
	node.className="selected"
	this.currentNode=nid
	this.OpenWin(nid)
}

TreeView.prototype.OpenWin=function(nid){
	var nNode=this.nodes[nid]
	if(!nNode.link||nNode.link=="#")return;	
	window.open(nNode.hasNode?nNode.link:nNode.lastlink,nNode.target)
}


TreeView.prototype.expandAll=function(){
	for(i=0;i<this.nodes.length;i++)
	if(this.nodes[i].hasNode)this.expand(i)
}

TreeView.prototype.collapseAll=function(){
	for(i=0;i<this.nodes.length;i++)
	if(this.nodes[i].hasNode)this.collapse(i)
}

TreeView.prototype.expandTo=function(nid){
	if(this.getP(nid)!=null){
		if(this.nodes[nid].hasNode)this.expand(nid)
		this.expandTo(this.getP(nid))
	}
}


TreeView.prototype.expand=function(nid){
	var node=document.getElementById('Child'+this.obj+nid)
	var icon=document.getElementById('icon'+this.obj+nid)
	var nNode=this.nodes[nid]
	if(node)node.style.display=''
	if(icon)icon.src=(nNode.lastNode?this.config.minusbottom.src:this.config.minus.src)
	//if(nNode.pid!=this.root.id)
	if(document.getElementById("folder"+this.obj+nid))document.getElementById("folder"+this.obj+nid).src=nNode.imgopen
	nNode.open=true
}

TreeView.prototype.collapse=function(nid){
	var node=document.getElementById('Child'+this.obj+nid)
	var icon=document.getElementById('icon'+this.obj+nid)
	var nNode=this.nodes[nid]
	if(node)node.style.display='none'
	if(icon)icon.src=(nNode.lastNode?this.config.plusbottom.src:this.config.plus.src)
	//if(nNode.pid!=this.root.id)
	if(document.getElementById("folder"+this.obj+nid))document.getElementById("folder"+this.obj+nid).src=nNode.imgclose
	nNode.open=false
}

TreeView.prototype.DrawLink=function(nid){
	var nNode=this.nodes[nid]
	var str="<span id='node"+this.obj+nid+"' class='normal'"; 
	str+=!nNode.check?"":" onmouseover='"+this.obj+".MouseOver(this)' onmouseout='"+this.obj+".MouseOut(this)' ondblclick='"+this.obj+".Click("+nid+")' onclick='"+this.obj+".selected("+nid+")'  ";
	str+=" title='"+nNode.title+"'>";
	if(this.checkbox)str+="<input type='checkbox' id='"+ nNode.id +"' onclick='"+this.obj+".checkp(this);'  name='"+this.checkboxName+"'   value='"+ nNode.id +"' "+ (nNode.check?'checked':'') +">";
	str+=nNode.check?"":"<font color=gray>";
	str+=nNode.txt 	;
	str+=nNode.check?"":"</font>";
	str+="</span>";
	return str;
	
}

TreeView.prototype.checkp=function(objcheck){
 this.checkp2(objcheck.id);
}

TreeView.prototype.checkp2=function(pid){
 var f = document.forms[this.formName];
 for(var n=0;n<this.nodes.length;n++){
 	if (this.nodes[n].pid==pid) {
 		f.elements[this.nodes[n].id].checked=f.elements[this.nodes[n].pid].checked;
 		if(this.nodes[n].hasNode)
 		this.checkp2(this.nodes[n].id);
 		}
 }
}

TreeView.prototype.MouseOver=function(o){
	var nNode=document.getElementById("node"+this.obj+this.currentNode)
	if(nNode!=o)o.className='MouseOver'
}

TreeView.prototype.MouseOut=function(o){
	var nNode=document.getElementById("node"+this.obj+this.currentNode)
	o.className=nNode==o?'selected':'normal'
}

TreeView.prototype.toString=function(){
	var str=""
	for(var i=0;i<this.nodes.length;i++)this.ChkPro(this.nodes[i])
	str+=this.DrawTree(this.root)
	return str
}

TreeView.prototype.getCheckedValue=function(){
	var value=[]
	var value1=document.getElementsByTagName("INPUT").length
	return value1

}


TreeView.prototype.open=function(){
	var nid=QueryString("id")
	if(isNaN(nid))return;
	if(nid<0||isNaN(parseInt(nid))||nid>this.nodes.length-1)return;
	this.expandTo(nid)
	this.selected(nid)
}