tree.htc

HTC,demo WEB用于。 超大型

<!--///////////////////////////////////////////////////////////////////////
    //  Module Name: tree     ///////////////////////////////////////////////////
    //       Author: hzh	        ///////////////////////////////////////////////////
    //		   Date: 2005-07-04   ///////////////////////////////////////////////////
    ///////////////////////////////////////////////////////////////////////-->
<public:component name="tree" urn="tree" lightweight="true">
<public:property name="xmlSource" get="getDataXML" put="putDataXML" />
<!-- tree整体位置、样式    -->
<public:property name="left" value="10" put="putLeft" />
<public:property name="top" value="10" put="putTop" />
<public:property name="width" value="200" put="putWidth" />
<public:property name="height" value="250" put="putHeight" />
<public:method name="refresh" internalname="createTree"/>
<public:property name="init" put="initialize"/>

<public:event name="onGotoclick" id="evtGotoPage"/>

<script language="JavaScript">

var objXMLDoc = null;			//tree的数据源对象
var objTreeContainersDiv = null;
var booleanOutspread = false;

var objArrayHasSpaceFlag = new Array();
	
var vLeft = 0;
var vTop = 0;
var vWidth = 150;
var vHeight = 150;

var mouseDrag = "";

function initialize()
{// 组件初始化
	var objTemp = null;
	var objNodeIco = null;
	var objNodeImg = null;
	var objSpan = null;
	var booleanHasChild = false;
	objTreeContainersDiv = element.document.createElement("<div class='phms_tree_ContainersDiv'>");
	objTreeContainersDiv = element.appendChild(objTreeContainersDiv);
	objTreeContainersDiv.oncontextmenu = function (){return false;};
	objTreeContainersDiv.onselectstart = function (){ return false;}
	createTree();
}

function createTree(){
	//包含父结点的所有子节点（不包括孙节点）
	if(!objXMLDoc) return;
	var objFirstItemList = objXMLDoc.selectNodes("//root/item");		
	objTreeContainersDiv.innerHTML = "";
	getSubItemDiv(objTreeContainersDiv,objFirstItemList);
	orientation();//定位
}

function textareamousedown()
{
	mouseDrag = "";
}

function textareaclick()
{
	mouseDrag = "";
}

//
function textareamouseup()
{
	if(mouseDrag == "" ) return;
	
	txtComments.innerText = mouseDrag;
	
	mouseDrag = "";
	
}

function getSubItemDiv(objContains,objNodeList){//
	if(!objNodeList) return;
	var objReturnDiv;
	var objNodeIco = null;
	var objNodeImg = null;
	var objSpan = null;
	var objSpaceIco = null;
	var booleanHasChild = false;
	var spaceIcoCnt = 0;
	
	
	for(var i = 0;i < objNodeList.length; i++)
	{
		booleanHasChild = (objNodeList[i].childNodes.length) ? true : false;
		
		objReturnDiv = element.document.createElement("<div>");
		objReturnDiv.style.overflow = "hidden";
		objReturnDiv.text = objNodeList[i].getAttribute("name");
		objReturnDiv.target = objNodeList[i].getAttribute("url") ? objNodeList[i].getAttribute("url") : "";
		objReturnDiv.id = objNodeList[i].getAttribute("id");
		objReturnDiv.depth = objNodeList[i].getAttribute("depth");//1
		
		objReturnDiv.hasChild = booleanHasChild;
		objReturnDiv.expand = booleanOutspread;  //false
		objReturnDiv.childCnt = objNodeList[i].getAttribute("childNumber");
		objReturnDiv.isLastNode = objNodeList[i].getAttribute("isLastNode") ? true : false;
		objReturnDiv.enabled = objNodeList[i].getAttribute("enabled") ? true : false;
				
		objReturnDiv.isFirstItem = objNodeList[i].getAttribute("firstItem") ? true : false;//都为true ;wen
				
		spaceIcoCnt = parseInt(objReturnDiv.depth);
		
		if(spaceIcoCnt == 1)
		{// 根节点			
			objNodeIco = element.document.createElement("<img>");
			
			//刘鹏飞新增 begin 原因:单独一个是的显示图片
			if(i == 0 && objNodeList.length == 1)
			{objNodeIco.src = booleanHasChild ? getIcoUrlFormImgList("dashplus.gif") : getIcoUrlFormImgList("noexpand.gif");}
			else if(i == 0)
			{
				objNodeIco.src = booleanHasChild ? getIcoUrlFormImgList("rplus.gif") : getIcoUrlFormImgList("r.gif");
			}
			else if(i == objNodeList.length - 1)
			{
				objNodeIco.src = booleanHasChild ? getIcoUrlFormImgList("lplus.gif") : getIcoUrlFormImgList("l.gif");
				
			}
			else
			{
				objNodeIco.src = booleanHasChild ? getIcoUrlFormImgList("tplus.gif") : getIcoUrlFormImgList("t.gif");
			}
			objNodeIco.align = "absmiddle";
			objNodeIco = objReturnDiv.appendChild(objNodeIco);
			
			if(booleanHasChild)
			{
				objNodeIco.onclick = loadSubItem;
			}
		}
		else
		{//后续节点
			
			for(var j = 1; j < spaceIcoCnt; j++)
			{
				objSpaceIco = element.document.createElement("<img>");
				objSpaceIco.src = objArrayHasSpaceFlag[j] ? getIcoUrlFormImgList("i.gif") : getIcoUrlFormImgList("noexpand.gif");
				objSpaceIco.align = "absmiddle";
				
				objReturnDiv.appendChild(objSpaceIco);
			}	

			objNodeIco = element.document.createElement("<img>");
			if(i == 0)
			{
				if(parseInt(objReturnDiv.depth) > 0 )
				{
					if(i == objNodeList.length - 1)
					{
						objNodeIco.src = booleanHasChild ? getIcoUrlFormImgList("lplus.gif") : getIcoUrlFormImgList("l.gif");
					}
					else
					{
						objNodeIco.src = booleanHasChild ? getIcoUrlFormImgList("tplus.gif") : getIcoUrlFormImgList("t.gif");
					}
				}
				else
				{
					objNodeIco.src = booleanHasChild ? getIcoUrlFormImgList("rplus.gif") : getIcoUrlFormImgList("r.gif");
				}
			}
			else if(i == objNodeList.length - 1)
			{
				objNodeIco.src = booleanHasChild ? getIcoUrlFormImgList("lplus.gif") : getIcoUrlFormImgList("l.gif");
			}
			else
			{
				objNodeIco.src = booleanHasChild ? getIcoUrlFormImgList("tplus.gif") : getIcoUrlFormImgList("t.gif");
			}
			objNodeIco.align = "absmiddle";
			objNodeIco = objReturnDiv.appendChild(objNodeIco);
			
			if(booleanHasChild) objNodeIco.onclick = loadSubItem;
		}
			
		if(objNodeList[i].getAttribute("ico"))
		{
			objNodeImg = element.document.createElement("<img>");
			objNodeImg.src = getIcoUrlFormImgList(objNodeList[i].getAttribute("ico"));//wen
			objNodeImg.align = "absmiddle";
			objNodeImg = objReturnDiv.appendChild(objNodeImg);
		}
			
		objSpan = element.document.createElement("<span>");
		objSpan.innerText = " " + objNodeList[i].getAttribute("name");

		objSpan.style.cursor = "default";			
		objSpan = objReturnDiv.appendChild(objSpan);
		
		if(objNodeList[i].getAttribute("enabled") && objNodeList[i].getAttribute("enabled") == "false"){
			objSpan.style.color = "#999999";	
			objReturnDiv.children[objReturnDiv.children.length - 2].src = getIcoUrlFormImgList("grayfolder.gif");
		}else{
			objReturnDiv.children[objReturnDiv.children.length - 2].src = getIcoUrlFormImgList(objNodeList[i].getAttribute("ico"));
			if(booleanHasChild)
			{				
				objNodeImg.onclick = loadSubItem;	
				objSpan.onclick = loadSubItem;
			}
			else
			{
				objNodeImg.onclick = gotoPage;	
				objSpan.onclick = gotoPage;
				
				//刘鹏飞新增关于拖拽begin
				objNodeImg.onmousedown = objNodeItemMouseDown;	
				objSpan.onmousedown = objNodeItemMouseDown;
				//end
			
			}
		}
		objReturnDiv = objContains.appendChild(objReturnDiv);
	}
		
}

//刘鹏飞新增关于拖拽begin
function objNodeItemMouseDown()
{
	setSelectColor();//设置选中条目的背景色
	var objCurContainsDiv = event.srcElement.parentElement;
	var objSpan = objCurContainsDiv.getElementsByTagName("span")[0];
	with(objSpan.style)
	{
		background = "#CCCCCC";
		color = "black";
	}
	
	mouseDrag = event.srcElement.parentElement.text;
}


function loadSubItem()
{
	setSelectColor();
	var objCurContainsDiv = event.srcElement.parentElement;
	var objSpan = objCurContainsDiv.getElementsByTagName("span")[0];
	
	with(objSpan.style)
	{
		background = "#cccccc";
		color = "black";
	}
	
	objCurContainsDiv.isLastNode ? setSpaceArrayItemVal(objCurContainsDiv.depth,false) : setSpaceArrayItemVal(objCurContainsDiv.depth,true);
	
	//刘鹏飞新增关于判断图片函数
	judgebeforeico(objCurContainsDiv);
		
	if(objCurContainsDiv.hasChild.toString() == "true")
	{
		var vXPathStr = "//item[@id='" +  objCurContainsDiv.id + "']";
		var objItemList = objXMLDoc.selectNodes(vXPathStr);	
		var objDivList = objCurContainsDiv.getElementsByTagName("div");
		if(objCurContainsDiv.expand.toString() == "false")
		{	
			getSubItemDiv(objCurContainsDiv,objItemList[0].childNodes);
		}
		else
		{
			for(var i = objDivList.length - 1;i >= 0; i--)
			{
				try
				{
					objCurContainsDiv.removeChild(objDivList[i]);
				}
				catch(e){}
			}
		}
		
		if(objCurContainsDiv.isLastNode)
		{
			objCurContainsDiv.expand.toString() == "true" ? objCurContainsDiv.children[objCurContainsDiv.children.length - 3].src = getIcoUrlFormImgList("lplus.gif") : objCurContainsDiv.children[objCurContainsDiv.children.length - 3 - parseInt(objDivList.length)].src = getIcoUrlFormImgList("lminus.gif");
		}
		else
		{
			objCurContainsDiv.expand.toString() == "true" ? objCurContainsDiv.children[objCurContainsDiv.children.length - 3].src = getIcoUrlFormImgList("tplus.gif") : objCurContainsDiv.children[objCurContainsDiv.children.length - 3 - parseInt(objDivList.length)].src = getIcoUrlFormImgList("tminus.gif");
		}
		
		if(objDivList.length == 1 && objCurContainsDiv.expand.toString() == "true")
		{
			objCurContainsDiv.children[objCurContainsDiv.children.length - 3].src = getIcoUrlFormImgList("lminus.gif");
		}
		else if(objDivList.length == 1 && objCurContainsDiv.expand.toString() == "false" && objCurContainsDiv.hasChild.toString() == "false")
		{
			objCurContainsDiv.children[objCurContainsDiv.children.length - 3 - parseInt(objDivList.length)].src = getIcoUrlFormImgList("lminus.gif");
		}
		
		objCurContainsDiv.expand = (objCurContainsDiv.expand.toString() == "true") ? false:true;
	}
}
	
	
	
function setSelectColor()
{
	if(!objTreeContainersDiv || !objTreeContainersDiv.getElementsByTagName("span")) return;
	for( var i = 0; i < objTreeContainersDiv.getElementsByTagName("span").length; i ++ )
	{
		objTreeContainersDiv.getElementsByTagName("span")[i].style.background = "";
	}
}

//拖拽	
function gotoPage()
{
	setSelectColor();//设置选中条目的背景色
	var objCurContainsDiv = event.srcElement.parentElement;
	var objSpan = objCurContainsDiv.getElementsByTagName("span")[0];
	with(objSpan.style)
	{
		background = "#CCCCCC";
	}
	window.target = event.srcElement.parentElement.target;
	evtGotoPage.fire();
}
	

function getIcoUrlFormImgList(icoName)
{
	var strReturnUrl;
	var icoList = ['images/dash.gif','images/dashminus.gif','images/dashplus.gif','images/folder.gif','images/i.gif','images/l.gif','images/lminus.gif','images/lplus.gif','images/minus.gif','images/plus.gif','images/rminus.gif','images/rplus.gif','images/t.gif','images/tminus.gif','images/tplus.gif','images/r.gif','images/calendar.gif','images/search.gif','images/noexpand.gif','images/margin_flag.gif','images/deleted.gif','images/contacts.gif','images/inbox.gif','images/root.gif','images/greenfolder.gif','images/redfolder.gif','images/grayfolder.gif'];	
	for(var i=0;i<icoList.length;i++)
	{
		if(icoList[i].substring(icoList[i].lastIndexOf("/") + 1,icoList[i].length) == icoName)
		{
			strReturnUrl = icoList[i];
			break;	
		}
	}
	return strReturnUrl;
}
	
function orientation()
{// 定位
	try{
		with(element.style)
		{
			left	= vLeft;
			top		= vTop;
			width	= vWidth;
			height	= vHeight;
		}

		with(objTreeContainersDiv.style)
		{		
			width	= parseInt(element.style.width) - 10;
			height	= parseInt(element.style.height) - 10;
		}
	}catch(e){}
}


function putDataXML(argXMLSource)
{
	while(objArrayHasSpaceFlag.length){
		objArrayHasSpaceFlag.pop();
	}
	
	var vXSLT = '<?xml version="1.0" encoding="UTF-8"?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/><xsl:template match="/"><xsl:element name="root"><xsl:apply-templates select="root"/></xsl:element></xsl:template><xsl:template match="root"><xsl:for-each select="*"><xsl:call-template name="itemNode"/></xsl:for-each></xsl:template><xsl:template name="itemNode" match="//item"><xsl:element name="item"><xsl:for-each select="@*"><xsl:copy-of select="."/></xsl:for-each><xsl:attribute name="enabled"><xsl:value-of select="@enabled"/></xsl:attribute><xsl:attribute name="id"><xsl:value-of select="generate-id()"/></xsl:attribute><xsl:attribute name="depth"><xsl:value-of select="count(ancestor::*)"/></xsl:attribute><xsl:attribute name="childNumber"><xsl:value-of select="count(child::*)"/></xsl:attribute><xsl:if test="count(following-sibling::*) = 0"><xsl:attribute name="isLastNode"><xsl:value-of select="\'true\'"/></xsl:attribute></xsl:if><xsl:if test="name(parent::node()) = \'root\'"><xsl:attribute name="firstItem"><xsl:value-of select="\'true\'"/></xsl:attribute></xsl:if><xsl:attribute name="idOfDepth"><xsl:number level="multiple"/></xsl:attribute><xsl:for-each select="*"><xsl:call-template name="itemNode"/></xsl:for-each></xsl:element></xsl:template></xsl:stylesheet>';
	objXMLDoc = __objGlobalCommonInst.transformXMLToNode(argXMLSource,vXSLT);
	
	if(!objXMLDoc) return;
	
	var objItemList = objXMLDoc.selectNodes("//item");
	var vMaxDepth = 0;;
	
	for(var i = 0;i < objItemList.length; i++)
	{
		vMaxDepth = (parseInt(objItemList[i].getAttribute("childNumber")) > vMaxDepth) ? parseInt(objItemList[i].getAttribute("childNumber")):vMaxDepth;
	}
	
	for(var i = 0; i < vMaxDepth; i++)
	{
		objArrayHasSpaceFlag[i] = true;
	}
}
	
function setSpaceArrayItemVal(argIndex,argBoolean)
{
	if(!objArrayHasSpaceFlag) return;
	for(var i =0; i < objArrayHasSpaceFlag.length; i++)
	{
		if(i == parseInt(argIndex))
		{
			objArrayHasSpaceFlag[i] = argBoolean;
			break;
		}
	}
}

//刘鹏飞新增 关于判断汉字前图片选择的问题
function judgebeforeico(node)
{
	var parentnode = node;
	for(var i =  node.depth ; i > 0 ; i--)
	{
		objArrayHasSpaceFlag[i] =  parentnode.isLastNode ? false : true;
		parentnode = parentnode.parentElement;
	}
}


function putLeft(argLeft)
{// tree Left
	vLeft = isNaN(parseInt(argLeft)) ? 0 : parseInt(argLeft);
}

function putTop(argTop)
{// tree Top
	vTop = argTop;
}

function putWidth(argWidth)
{// tree Width
	vWidth = argWidth;
	orientation();
}

function putHeight(argHeight)
{// tree Height
	vHeight = argHeight;
	orientation();
}
</script>
</public:component>