gavintree.js

Js Menu and Tree 利用相同的数据实现menu和tree的例子

var gavinTreeHelpers = null;
var gavinTreeNodeHelpers = null;
var gavinTreeImgPath = "images/";

//tree class 
//para :
//   objTreeContainerDivID :  tree container id
//the container html like <div id="objTreeContainerDivID"></div>
function gavinTree(objTreeContainerDivID,divData)
{
	this.id = objTreeContainerDivID;
	this.data = divData;
	this.objContainer = null;

	this.root = function()
	{
		return this.objContainer;
	};
	
	this.addChild = function (objParent,objNode)
	{
		objParent.addChild(objNode);	
	};

	this.reFresh = function()
	{
		clearInit(this.root().divObject);
		gavinTreeInitChildNodes(this.root().divObject);
	};

	this.byId = function(objTreeContainerDivID)
	{
		var rtnValue = null;
		for(var i=0;i<gavinTreeHelpers.length;i=i+1)
		{
			if(gavinTreeHelpers[i].objContainer.divObject == document.getElementById(objTreeContainerDivID))
			{
				rtnValue = gavinTreeHelpers[i];
			}
		}
		return rtnValue;
	};

	this.newNode = function(label,value)
	{
		var temp = new gavinTreeNode();
		temp.label = label;
		temp.value = value;
		return temp.creat();
	};

	this.init = function()
	{

		var temp = document.getElementById(this.id);
		temp.innerHTML = this.data;
		
		if(temp.getAttribute("gavinType") == "tree" && temp.getAttribute("gavinInit") == "true")
		{
			return this.byId(this.id);
		}
		else
		{
			this.objContainer = new gavinTreeNode().importDiv(temp,true);
			
			var childs = temp.getElementsByTagName("DIV");
			for(var i=0;i<childs.length;i=i+1)
			{				
				new gavinTreeNode().importDiv(childs[i],false);
			}

			if(childs.length > 0)
			{
				var treeClick = temp.getAttribute("treeClick");
				gavinTreeInitChildNodes(this.objContainer.divObject,treeClick);
			}
		}
		if(gavinTreeHelpers == null)
		{
			gavinTreeHelpers = new Array();
		}
		gavinTreeHelpers[gavinTreeHelpers.length] = this;
		return this;
	};
	

	if(this.id != null && this.id != "")
		this.init();
}


function gavinTreeNode()
{
	this.label = null;
	this.value = null;
	this.href = null;
	this.target = null;


	this.divObject = null;
	this.parentNode = null;
	this.childNodes = new Array();
	this.gavinType = "treeNode";
	this.className = "dojoTreeNode";

	this.creat = function()
	{
		var temp = document.createElement("DIV"); 
		if(this.label != null) temp.setAttribute("label",this.label);
		if(this.value != null) temp.setAttribute("value",this.value);
		if(this.className != null) temp.className = this.className ; 
		if(this.gavinType != null) temp.setAttribute("gavinType",this.gavinType);

		this.divObject = temp;
		if(gavinTreeNodeHelpers == null)
		{
			gavinTreeNodeHelpers = new Array();
		}
		gavinTreeNodeHelpers[gavinTreeNodeHelpers.length] = this;

		return this;
	}
	this.importDiv = function(objDiv,isRoot)
	{
		if(isRoot == true)
		{
			objDiv.setAttribute("gavinType","tree");
			objDiv.setAttribute("gavinInit","true");
			objDiv.className = "dojoTree";
		}
		else
		{
			this.label = objDiv.getAttribute("label");
			this.value = objDiv.getAttribute("value");
			objDiv.setAttribute("gavinType","treeNode");
			objDiv.className = "dojoTreeNode";	
		}
		this.divObject = objDiv;
		if(gavinTreeNodeHelpers == null)
		{
			gavinTreeNodeHelpers = new Array();
		}
		gavinTreeNodeHelpers[gavinTreeNodeHelpers.length] = this;

		return this;
	}
	this.addChild = function(newNode)
	{
		this.divObject.appendChild(newNode.divObject);
		newNode.parentNode = this;
		this.childNodes[this.childNodes.length] = newNode;
	}

	this.parentNode = function()
	{

		if(this.divObject.getAttribute("gavinType") == "tree")
		{
			return null;
		}
		if(this.parentNode == null)
		{
			this.parentNode = this.byDivNode(this.divObject.parentNode);
		}
		return this.parentNode;
	}

	this.byLabel = function(label)
	{
		var rtnValue = null;
		for(var i=0;i<gavinTreeNodeHelpers.length;i=i+1)
		{
			if(gavinTreeNodeHelpers[i].label == label)
			{
				rtnValue = gavinTreeNodeHelpers[i];
				break;
			}
		}
		return rtnValue;
	}

	this.byValue = function(value)
	{
		var rtnValue = null;
		for(var i=0;i<gavinTreeNodeHelpers.length;i=i+1)
		{
			if(gavinTreeNodeHelpers[i].value == value)
			{
				rtnValue = gavinTreeNodeHelpers[i];
				break;
			}
		}
		return rtnValue;
	}
	this.byDivNode = function(divNode)
	{
		var rtnValue = null;
		for(var i=0;i<gavinTreeNodeHelpers.length;i=i+1)
		{
			if(gavinTreeNodeHelpers[i].divNode == divNode)
			{
				rtnValue = gavinTreeNodeHelpers[i];
				break;
			}
		}
		return rtnValue;
	}
	
}

////tree operation function///////
function gavinTreeCreateTreeNodes(obj,treeClick)
{
	
	var TitleDiv = document.createElement("DIV"); 
	
	gavinTreeAddBlankImg(obj,TitleDiv);
	
	if(obj.hasChildNodes())
	{
		var plus = document.createElement("IMG"); 
		plus.src = gavinTreeImgPath + "treenode_expand_plus.gif";
		gavinTreeSetBackImg(obj,plus);
		
		plus.onclick = function()
		{
			gavinTreeExpand(this,obj,treeClick);
		}
		plus.setAttribute("isHaveNodes","true");
		plus.setAttribute("gavinType","treeNodeTitleImg");
		TitleDiv.appendChild(plus);
		
	}
	else
	{
		gavinTreeSetNoChildImg(obj,TitleDiv);
	}
	
	var title = document.createElement("SPAN");
	title.innerHTML =  obj.getAttribute("label");
	
	if(treeClick)
	{
		title.onclick = function()
		{
			//gavinTreeTitleClick(obj);
			//alert("name==" + treeClick);
			eval(treeClick + "(obj)");
		}
	}
	title.id = "gavinTreeNode_title_" + obj.getAttribute("value");	
	title.setAttribute("gavinType","treeNodeTitle");

	TitleDiv.appendChild(title);
	TitleDiv.id = "gavinTreeNode_titleDiv_" + obj.getAttribute("value");
	TitleDiv.setAttribute("gavinType","treeNodeTitleDiv");

	obj.parentNode.insertBefore(TitleDiv, obj);

	obj.id = "gavinTreeNode_node_" + obj.getAttribute("value");	
	obj.setAttribute("gavinType","treeNode");
	obj.setAttribute("isInit","true");
	obj.style.display = "none";	
	return 1;
}


function gavinTreeInitChildNodes(obj,treeClick)
{	
	var firstNode = getFirstNode(obj);
	
	if(firstNode.getAttribute("isInit") == "true")  return false;
	for(i=0;i<obj.childNodes.length;i++)
	{
		if(obj.childNodes[i].tagName == "DIV" && obj.childNodes[i].getAttribute("gavinType") == "treeNode")
		{
			i = i + gavinTreeCreateTreeNodes(obj.childNodes[i],treeClick);	
		}
	}
}

function gavinTreeExpand(objImg,objDiv,treeClick)
{
	
	gavinTreeInitChildNodes(objDiv,treeClick);
	
	var imgPath = objImg.src.split("/");
	var len = imgPath.length;
	var imgName = imgPath[len - 1];
	var nextImg;
	if(imgName == "treenode_expand_plus.gif")
	{
		nextImg = "treenode_expand_minus.gif";
	}
	else
	{
		nextImg = "treenode_expand_plus.gif";
	}
	objImg.src = objImg.src.replace(imgName,nextImg);
	
	if(objDiv.style.display == "")
	{
		objDiv.style.display = "none";
	}
	else
	{
		objDiv.style.display = "";
	}
	
}

function clearInit(obj)
{
	var allDiv = obj.getElementsByTagName("DIV");
	for(var i=0;i< allDiv.length;i++)
	{

		if(allDiv[i].getAttribute("gavinType") == "treeNodeTitleDiv")
		{
			allDiv[i].parentNode.removeChild(allDiv[i]);
		}

		if(allDiv[i].getAttribute("gavinType") == "treeNode")
		{
			allDiv[i].removeAttribute("isInit");
		}
	}
}

function getObjImg(obj)
{
	if(!obj.hasChildNodes())
	{
		return null;
	}
	var cc = null;
	for(var i =0;i<obj.parentNode.childNodes.length;i++)
	{
		if(obj == obj.parentNode.childNodes[i])
		{
			cc = obj.parentNode.childNodes[i-1];
			break;
		}
	}
	
	if(cc == null)  return null;
	 
	var img = cc.childNodes[cc.childNodes.length -2];

	return img;
}


function gavinTreeExpandTo(value)
{
	var  obj = document.getElementById("dojoTreeNode_node_" + value );
	
	var dep = gavinTreeGetDepth(obj);

	for(var i=1;i<dep;i++)
	{
		obj= obj.parentNode;
		var img = getObjImg(obj);
		if(img != null) gavinTreeExpand(img,obj);
		
	}
}

function gavinTreeInitAll(obj)
{
	var firstNode = getFirstNode(obj);
	if(firstNode.title == "")  return false;
	var allDiv = obj.getElementsByTagName("DIV");
	
	for(i=0;i<allDiv.length;i++)
	{
		if(allDiv[i].getAttribute("gavinType") == "treeNode")
		{
			i = i + gavinTreeCreateTreeNodes(allDiv[i]);	
		}
	}
	
}

function isFirstNode(obj)
{
	if(obj == getFirstNode(obj.parentNode))
	{	
		return true;
	}
	
	return false;
}

function getFirstNode(obj)
{
	var cNodes = obj.childNodes;
	for(i=0;i<cNodes.length;i++)
	{
		if(cNodes[i].tagName == "DIV" && cNodes[i].getAttribute("gavinType") == "treeNode")
		{
			return cNodes[i];
		}
	}
	return  null;
}

function isLastNode(obj)
{
	var cNodes = obj.parentNode.childNodes;
	for(i=cNodes.length -1 ;i>=0 ;i--)
	{
		if(cNodes[i].tagName == "DIV" && cNodes[i].getAttribute("gavinType") == "treeNode")
		{
			if(cNodes[i] == obj)
			{
				return true;
			}
			else
			{	
				return false;
			}
		}
	}
	
	return false;
}

function gavinTreeGetDepth(obj)
{
	var count = 0;
	var temp = obj;
	while(temp.getAttribute("gavinType") != "tree")
	{
		count  = count  + 1;
		temp = temp.parentNode;
	}
	return count;
}

function gavinTreeSetBackImg(obj,Img)
{
	var dep = gavinTreeGetDepth(obj);

	if(isFirstNode(obj) && isLastNode(obj))
	{
		Img.style.backgroundImage = "url(" + gavinTreeImgPath + "treenode_grid_x.gif)";
		return ;
	}
	
	if(isFirstNode(obj))
	{
		if(dep == 1)
			Img.style.backgroundImage = "url(" + gavinTreeImgPath + "treenode_grid_y.gif)";
		else
			Img.style.backgroundImage = "url(" + gavinTreeImgPath + "treenode_grid_t.gif)";
		return ;
	}
	
	if(isLastNode(obj))
	{
		Img.style.backgroundImage = "url(" + gavinTreeImgPath + "treenode_grid_l.gif)";
		return ;
	}
	
	Img.style.backgroundImage = "url(" + gavinTreeImgPath + "treenode_grid_t.gif)";	
}

function gavinTreeAddBlankImg(obj,ImgContainer)
{
	var dep = gavinTreeGetDepth(obj);
	var temp = obj;
	for(j=1;j<dep;j++)
	{
		var blank =  document.createElement("IMG");
		temp = temp.parentNode;
		if(!isLastNode(temp))
		{
			blank.src = gavinTreeImgPath + "treenode_grid_v.gif";
		}
		else
		{
			blank.src = gavinTreeImgPath + "treenode_blank.gif";
		}
		
		ImgContainer.insertBefore(blank,ImgContainer.firstChild);
	}
	
}

function gavinTreeSetNoChildImg(obj,ImgContainer)
{
	var dep = gavinTreeGetDepth(obj);	
	var Img =  document.createElement("IMG");

	if(isFirstNode(obj) && isLastNode(obj))
	{
		if(dep == 1)
			Img.src = gavinTreeImgPath + "treenode_grid_x.gif";
		else
			Img.src = gavinTreeImgPath + "treenode_grid_l.gif";
		ImgContainer.appendChild(Img);
		return null;
	}

	if(isFirstNode(obj))
	{
		if(dep == 1)
			Img.src = gavinTreeImgPath + "treenode_grid_y.gif";
		else
			Img.src = gavinTreeImgPath + "treenode_grid_t.gif";
		
		ImgContainer.appendChild(Img);
		return null;
	}
	
	if(isLastNode(obj))
	{
		Img.src = gavinTreeImgPath + "treenode_grid_l.gif";
		ImgContainer.appendChild(Img);
		return null;
	}
	
	Img.src = gavinTreeImgPath + "treenode_grid_t.gif";
	ImgContainer.appendChild(Img);

}