tree.js

电信的网厅的整站代码

/***************************************************************************************
 *                               XMLTree2.1
 *     此代码版权归海洋工作室ocean所有，您可以非商业目的使用、复制、修改此代码，但需要
 * 保留本工作室的版权信息。如果您使用、修改此代码为商业目的，请联系本工作室取得使用许可。
 * 此脚本的商业许可为RMB30，被许可方除不能分发和转售之外，可以用于被许可方的任何项目和
 * 产品当中。
 * 如果您对本程序有什么建议，请email to:[e-mail]。
 *
 *                                                                          海洋工作室
 *                                                          http://www.oceanstudio.net
 *                                                     ocean([e-mail]) 制作
 *****************************************************************************************/

//XML树类
function XMLTree(treeName,imgPath) {
	this.id = treeName;
	this.xmlDoc = null;
	this.dblClick = false;    // "true"为允许有双击事件，"false"为不允许有双击事件，默认为"false"
	this.openAction = false;  //展开节点时的行为,"true"为已展开的节点全部关闭，"false"为已展开的节点全部保持不变.

	this.isOpened = false;	//节点是否是展开的，false－没有展开
	this.isLoaded = false;	//节点是否是已经加载的。（针对ref型节点）
	this.isSelected = false;	//节点是否被选中

	this.ref = "";			//引用外部的xml路径
	this.autoRefresh = false;	//是否总是重新加载外部xml（false－不重新加载）

	this.text = "";	//节点的文字
	this.title = "";	//节点的提示

	this.textColor = "#000000";	//节点文字的颜色
	this.overTextColor = "#cccccc";	//节点鼠标放上去时候文字的颜色
	this.selectedTextColor = "white";	//节点被选中后的颜色

	this.backgroundColor = "";	//节点的背景色
	this.overBackgroundColor = "";	//节点鼠标放上去是的背景色
	this.selectedBackgroundColor = "Darkblue";	//节点被选中时候的背景色

	this.underLine = false;		//节点文字是否有下划线，false-没有下划线
	this.overUnderLine = true;	//节点鼠标放上去的时候文字是否有下划线，false-没有下划线
	this.selectedUnderLine = false;	//节点选中的时候文字是否有下划线

	this.fontSize = "9pt";			//文字大小

	this.paddingLeft = "18px";//左边缩进
	this.paddingTop = "2px";  //上边缩进
	this.spaceWidth = "2px";    //图片和图片以及文字与图片之间间距
	this.leafPaddingLeft = "18px";	//2.01：叶子左边多余缩进

	this.cursor = "hand";		//鼠标的默认形状

	if ( imgPath == null ) {
		this.openFlag = "../../common/images/openflag.gif";		//节点打开时的第一个图片（一般是-号）
		this.closeFlag = "../../common/images/closeflag.gif";	//节点关闭时的第一个图片（一般是+号）
		this.openFolder = "../../common/images/openfolder.gif";	//节点打开时的第二个图片（一般是一个文件夹的图片）
		this.closeFolder = "../../common/images/closedfolder.gif";	//节点关闭时的第二个图片（一般是一个文件夹的图片）
		this.leafImage = "../../common/images/url.gif";		//叶子节点的图片
	}
	else {
		this.openFlag = imgPath + "/openflag.gif";		//节点打开时的第一个图片（一般是-号）
		this.closeFlag = imgPath + "/closeflag.gif";	//节点关闭时的第一个图片（一般是+号）
		this.openFolder = imgPath + "/openfolder.gif";	//节点打开时的第二个图片（一般是一个文件夹的图片）
		this.closeFolder = imgPath + "/closedfolder.gif";	//节点关闭时的第二个图片（一般是一个文件夹的图片）
		this.leafImage = imgPath + "/url.gif";		//叶子节点的图片
	}
	this.href = "";			//节点的url链接

	this.selectedNode = null;					//被选中的节点

	this.doc = null;		//节点的文档对象
	this.menuNode = new Array();		//节点数组：此节点的子菜单中的每一个节点
	this.parent = null;			//节点的父亲（为null的话表明这是一个树根）
	this.root = this;			//节点的根（为null的话表明这是一个树根）
	this.currentNode = null;	//当前正在使用的节点
}
//外部方法：异步xml读取数据，数据来自一个xml文件
XMLTree.prototype.load = function (url,container) {
	if (container != null)
		this.doc = container;
	this.xmlDoc = new ActiveXObject("Msxml.DOMDocument");
	this.root.currentNode = this;
	var f = new Function("event",this.root.id+".currentNode.parseTree()");
	this.xmlDoc.onreadystatechange = f;
	this.xmlDoc.load(url);
}

XMLTree.prototype.loadXMLStr = function(xmlStr, container) {
	if (container != null)
		this.doc = container;
	this.xmlDoc = new ActiveXObject("Msxml.DOMDocument");
	this.root.currentNode = this;
	this.xmlDoc.loadXML(xmlStr);

	this.root.currentNode.parseTree();
}

//展开一个节点的下一级子节点
XMLTree.prototype.open = function (nodeId) {
	var node = this.getMenuItem(nodeId);
	if (node == null) node = this;		//如果没有找到相应的节点，则以自身节点
	if (node.parent == null) return;		//如果节点是根结点，则返回
	var nodeType = node.getType();
	if (nodeType != "leaf") {		//叶子节点不去理会
		if (nodeType == "node")	{	//如果是一个包含字节点的节点
			node.doc.children[1].style.display = "block";
		}
		else {		//如果是引用节点
			if (node.isLoaded) {	//如果节点已经加载，则直接展开
				if (node.doc.children.length >= 2) {
					node.doc.children[1].style.display = "block";
				}
			}
			else {
				node.load(node.ref);		//加载子节点的树
				node.isLoaded = true;
			}
		}
		//标识节点为打开状态
		node.isOpened = true;
		node.doc.children[0].rows[0].cells[0].children[0].src = node.openFlag;
		node.doc.children[0].rows[0].cells[1].children[0].src = node.openFolder;
	}
}
//展开一个节点的下一级子节点
XMLTree.prototype.openXmlStr = function (nodeId, xmlStr) {
	var node = this.getMenuItem(nodeId);
	if (node == null) node = this;		//如果没有找到相应的节点，则以自身节点
	if (node.parent == null) return;		//如果节点是根结点，则返回
	var nodeType = node.getType();
	if (nodeType != "leaf") {		//叶子节点不去理会
		if (xmlStr == null) {	//如果节点已经加载，则直接展开
			if (node.doc.children.length >= 2) {
				node.doc.children[1].style.display = "block";
			}
		}
		else {
			if ( node.isLoaded || nodeType == "node") {
				// add by janage
				// 已经加载，系统删除原先的节点。
       			var divs = node.doc.all.tags("DIV");
       			for ( var i=0; i<divs.length; i++ ) {
       				divs[i].removeNode(true);
       			}
			}

   			node.menuNode = new Array();
			node.loadXMLStr(xmlStr);		//加载子节点的树
			
			node.doc.children[1].style.display = "block";
			node.isLoaded = true;
		}

		//标识节点为打开状态
		node.isOpened = true;
		node.doc.children[0].rows[0].cells[0].children[0].src = node.openFlag;
		node.doc.children[0].rows[0].cells[1].children[0].src = node.openFolder;
	}
	else {
		if ( xmlStr != null && xmlStr.length > 0) {
			node.loadXMLStr(xmlStr);
			
			if ( node.doc.childNodes.length == 1 ) return ;

			// 将叶子节点升为普通的节点。
			var flagNode = node.doc.children(0).rows(0).cells(0);
			var floderNode = node.doc.children(0).rows(0).cells(1);

			var flagImg;
			if ( flagNode.childNodes.length == 0 ) {
				flagImg = document.createElement("img");
				flagNode.appendChild(flagImg);
			}
			else {
				flagImg = document.children(0);
			}
			flagImg.src = node.openFlag;

			var floderImg;
			if ( floderNode.childNodes.length == 0 ) {
				floderImg = document.createElement("img");
				floderNode.appendChild(floderImg);
			}
			else {
				floderImg =  floderNode.children(0);
			}
			floderNode.style.paddingLeft = node.spaceWidth;

			floderImg.src = (node.openFolder==undefined)?( (this.openFolder==undefined)?this.root.openFolder:this.openFolder):node.openFolder;

			node.doc.children(1).style.display = "block";
			node.isLoaded = true;
			//标识节点为打开状态
			node.isOpened = true;
		}
	}

}

//关闭一个节点的下一级子节点
XMLTree.prototype.close = function (nodeId) {
	var node = this.getMenuItem(nodeId);
	if (node == null) node = this;		//如果没有找到相应的节点，则以自身节点
	if (node.parent == null) return;		//如果节点是根结点，则返回
	var nodeType = node.getType();
	if (nodeType != "leaf") {		//叶子节点不去理会
		if (nodeType == "node")	{	//如果是一个包含字节点的节点
			if (node.doc.children.length >= 2) {
				node.doc.children[1].style.display = "none";
			}
		}
		else {		//如果是引用节点
			if (node.autoRefresh) {			//如果节点属于总是加载情况，则删除掉此节点的子节点
				node.doc.children[1].removeNode(true);
				node.menuNode = new Array();
				node.isLoaded = false;
			}
			else {
				if (node.doc.children.length >= 2) {
					node.doc.children[1].style.display = "none";
				}
			}
		}
		node.isOpened = false;
		node.doc.children[0].rows[0].cells[0].children[0].src = node.closeFlag;
		node.doc.children[0].rows[0].cells[1].children[0].src = node.closeFolder;
	}
}
//选中一个节点
XMLTree.prototype.selected = function (nodeId) {
	var node = this.getMenuItem(nodeId);
	if (node == null) node = this;		//如果没有找到相应的节点，则以自身节点
	if (node.parent == null) return;		//如果节点是根结点，则返回
	var oSpan = node.doc.children[0].cells[2].children[0];	//找到此节点相应的文字对象
	with (oSpan.style) {
		color = node.selectedTextColor;
		backgroundColor = node.selectedBackgroundColor;
		textDecoration = node.selectedUnderLine ? "underline" : "none";
		fontWeight="bold";
	}
	node.isSelected = true;				//标识节点被选中
}
//取消选中的一个节点
XMLTree.prototype.unSelected = function (nodeId) {
	var node = this.getMenuItem(nodeId);
	if (node == null) node = this;		//如果没有找到相应的节点，则以自身节点
	if (node.parent == null) return;		//如果节点是根结点，则返回
	var oSpan = node.doc.children[0].cells[2].children[0];	//找到此节点相应的文字对象
	with (oSpan.style) {
		color = node.textColor;
		backgroundColor = node.backgroundColor;
		textDecoration = node.underLine ? "underline" : "none";
		fontWeight="normal";
	}
	node.root.selectedNode = null; // 设置选中的节点为null。
	node.isSelected = false;				//标识节点被选中
}
//得到当前节点的类型，返回"leaf"、"node"、"ref"三种情况
XMLTree.prototype.getType = function () {
	if (this.ref != "") return "ref";
	if (this.menuNode.length > 0) return "node";
	return "leaf";
}
//根据菜单项id查找菜单项，返回拥有此id的菜单项
XMLTree.prototype.getMenuItem = function (id) {
	if (this.id == id) {		//如果此节点就是要寻找的节点
		return this;
	}
	else {
		for (var i=0;i<this.menuNode.length;i++) {
			var result = this.menuNode[i].getMenuItem(id);		//递归搜索子节点
			if (result != null)		//如果搜索到则返回此节点
				return result;
		}
		return null;		//如果搜索不到则返回null
	}
}

//2.01：根据菜单项href查找菜单项，返回拥有此href的菜单项
XMLTree.prototype.getMenuItemByHref = function (href) {
	if (this.href == href) {		//如果此节点就是要寻找的节点
		return this;
	}
	else {
		for (var i=0;i<this.menuNode.length;i++) {
			var result = this.menuNode[i].getMenuItemByHref(href);		//递归搜索子节点
			if (result != null)		//如果搜索到则返回此节点
				return result;
		}
		return null;		//如果搜索不到则返回null
	}
}
//解析xml树