xtree.js

js“树”读取xml数据,我写了一个xml文档不用分层

		"<img id=\"" + this.id + "-icon\" class=\"webfx-tree-icon\" src=\"" + ((webFXTreeHandler.behavior == 'classic' && this.open)?this.openIcon:this.icon) + "\" onclick=\"webFXTreeHandler.select(this);\">" +
		"<a href=\"" + this.action + "\" id=\"" + this.id + "-anchor\" onfocus=\"webFXTreeHandler.focus(this);window.status='"+this.text+"';return  true;\" onblur=\"webFXTreeHandler.blur(this);\"" +
		(this.target ? " target=\"" + this.target + "\"" : "") +
		"   onmouseover=\"window.status='"+this.text+"';return  true;\">"+ 
		this.text + "</a></div>" +
		"<div id=\"" + this.id + "-cont\" class=\"webfx-tree-container\" style=\"display: " + ((this.open)?'block':'none') + ";\">";
	var sb = [];
	for (var i = 0; i < this.childNodes.length; i++) {
		sb[i] = this.childNodes[i].toString(i, this.childNodes.length);
	}
	this.rendered = true;
	return str + sb.join("") + "</div>";
};

/*
 * WebFXTreeItem class
 */

function WebFXTreeItem(sText, sAction, eParent, sIcon, sOpenIcon) {
	this.base = WebFXTreeAbstractNode;
	this.base(sText, sAction);
	/* Defaults to close */
	if (webFXTreeConfig.usePersistence) {
		this.open = (webFXTreeHandler.cookies.getCookie(this.id.substr(18,this.id.length - 18)) == '1')?true:false;
	} else { this.open = false; }
	if (sIcon) { this.icon = sIcon; }
	if (sOpenIcon) { this.openIcon = sOpenIcon; }
	if (eParent) { eParent.add(this); }
}

WebFXTreeItem.prototype = new WebFXTreeAbstractNode;

WebFXTreeItem.prototype.remove = function() {
	var iconSrc = document.getElementById(this.id + '-plus').src;
	var parentNode = this.parentNode;
	var prevSibling = this.getPreviousSibling(true);
	var nextSibling = this.getNextSibling(true);
	var folder = this.parentNode.folder;
	var last = ((nextSibling) && (nextSibling.parentNode) && (nextSibling.parentNode.id == parentNode.id))?false:true;
	this.getPreviousSibling().focus();
	this._remove();
	if (parentNode.childNodes.length == 0) {
		document.getElementById(parentNode.id + '-cont').style.display = 'none';
		parentNode.doCollapse();
		parentNode.folder = false;
		parentNode.open = false;
	}
	if (!nextSibling || last) { parentNode.indent(null, true, last, this._level, parentNode.childNodes.length); }
	if ((prevSibling == parentNode) && !(parentNode.childNodes.length)) {
		prevSibling.folder = false;
		prevSibling.open = false;
		iconSrc = document.getElementById(prevSibling.id + '-plus').src;
		iconSrc = iconSrc.replace('minus', '').replace('plus', '');
		document.getElementById(prevSibling.id + '-plus').src = iconSrc;
		document.getElementById(prevSibling.id + '-icon').src = webFXTreeConfig.fileIcon;
	}
	if (document.getElementById(prevSibling.id + '-plus')) {
		if (parentNode == prevSibling.parentNode) {
			iconSrc = iconSrc.replace('minus', '').replace('plus', '');
			document.getElementById(prevSibling.id + '-plus').src = iconSrc;
}	}	}

WebFXTreeItem.prototype._remove = function() {
	for (var i = this.childNodes.length - 1; i >= 0; i--) {
		this.childNodes[i]._remove();
 	}
	for (var i = 0; i < this.parentNode.childNodes.length; i++) {
		if (this == this.parentNode.childNodes[i]) {
			for (var j = i; j < this.parentNode.childNodes.length; j++) {
				this.parentNode.childNodes[j] = this.parentNode.childNodes[j+1];
			}
			this.parentNode.childNodes.length -= 1;
			if (i + 1 == this.parentNode.childNodes.length) { this.parentNode._last = true; }
			break;
	}	}
	webFXTreeHandler.all[this.id] = null;
	var tmp = document.getElementById(this.id);
	if (tmp) { tmp.parentNode.removeChild(tmp); }
	tmp = document.getElementById(this.id + '-cont');
	if (tmp) { tmp.parentNode.removeChild(tmp); }
}

WebFXTreeItem.prototype.expand = function() {
	this.doExpand();
	document.getElementById(this.id + '-plus').src = this.minusIcon;
}

WebFXTreeItem.prototype.collapse = function(b) {
	if (!b) { this.focus(); }
	this.doCollapse();
	document.getElementById(this.id + '-plus').src = this.plusIcon;
}

WebFXTreeItem.prototype.getFirst = function() {
	return this.childNodes[0];
}

WebFXTreeItem.prototype.getLast = function() {
	if (this.childNodes[this.childNodes.length - 1].open) { return this.childNodes[this.childNodes.length - 1].getLast(); }
	else { return this.childNodes[this.childNodes.length - 1]; }
}

WebFXTreeItem.prototype.getNextSibling = function() {
	for (var i = 0; i < this.parentNode.childNodes.length; i++) {
		if (this == this.parentNode.childNodes[i]) { break; }
	}
	if (++i == this.parentNode.childNodes.length) { return this.parentNode.getNextSibling(); }
	else { return this.parentNode.childNodes[i]; }
}

WebFXTreeItem.prototype.getPreviousSibling = function(b) {
	for (var i = 0; i < this.parentNode.childNodes.length; i++) {
		if (this == this.parentNode.childNodes[i]) { break; }
	}
	if (i == 0) { return this.parentNode; }
	else {
		if ((this.parentNode.childNodes[--i].open) || (b && this.parentNode.childNodes[i].folder)) { return this.parentNode.childNodes[i].getLast(); }
		else { return this.parentNode.childNodes[i]; }
} }

WebFXTreeItem.prototype.keydown = function(key) {
	if ((key == 39) && (this.folder)) {
		if (!this.open) { this.expand(); }
		else { this.getFirst().select(); }
		return false;
	}
	else if (key == 37) {
		if (this.open) { this.collapse(); }
		else { this.parentNode.select(); }
		return false;
	}
	else if (key == 40) {
		if (this.open) { this.getFirst().select(); }
		else {
			var sib = this.getNextSibling();
			if (sib) { sib.select(); }
		}
		return false;
	}
	else if (key == 38) { this.getPreviousSibling().select(); return false; }
	return true;
}

WebFXTreeItem.prototype.setAction = function(nAction) {
	this.action = nAction || webFXTreeConfig.defaultAction;
	
}

WebFXTreeItem.prototype.setTarget = function(nTarget){
	this.target = nTarget;
}


WebFXTreeItem.prototype.toString = function (nItem, nItemCount) {
	var foo = this.parentNode;
	var indent = '';
	if (nItem + 1 == nItemCount) { this.parentNode._last = true; }
	var i = 0;
	while (foo.parentNode) {
		foo = foo.parentNode;
		indent = "<img id=\"" + this.id + "-indent-" + i + "\" src=\"" + ((foo._last)?webFXTreeConfig.blankIcon:webFXTreeConfig.iIcon) + "\">" + indent;
		i++;
	}
	this._level = i;
	if (this.childNodes.length) { this.folder = 1; }
	else { this.open = false; }
	if ((this.folder) || (webFXTreeHandler.behavior != 'classic')) {
		if (!this.icon) { this.icon = webFXTreeConfig.folderIcon; }
		if (!this.openIcon) { this.openIcon = webFXTreeConfig.openFolderIcon; }
	}
	else if (!this.icon) { this.icon = webFXTreeConfig.fileIcon; }
	var label = this.text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
	var str = "<div id=\"" + this.id + "\" ondblclick=\"webFXTreeHandler.toggle(this);\" class=\"webfx-tree-item\" onkeydown=\"return webFXTreeHandler.keydown(this, event)\">" +
		indent +
		"<img id=\"" + this.id + "-plus\" src=\"" + ((this.folder)?((this.open)?((this.parentNode._last)?webFXTreeConfig.lMinusIcon:webFXTreeConfig.tMinusIcon):((this.parentNode._last)?webFXTreeConfig.lPlusIcon:webFXTreeConfig.tPlusIcon)):((this.parentNode._last)?webFXTreeConfig.lIcon:webFXTreeConfig.tIcon)) + "\" onclick=\"webFXTreeHandler.toggle(this);\">" +
		"<img id=\"" + this.id + "-icon\" class=\"webfx-tree-icon\" src=\"" + ((webFXTreeHandler.behavior == 'classic' && this.open)?this.openIcon:this.icon) + "\" onclick=\"webFXTreeHandler.select(this);\">" +
		"<a href=\"" + this.action + "\" id=\"" + this.id + "-anchor\" onfocus=\"webFXTreeHandler.focus(this);window.status='"+this.text+"';return  true;\" onblur=\"webFXTreeHandler.blur(this);\"" +
		(this.target ? " target=\"" + this.target + "\"" : "") +
		"   onmouseover=\"window.status='"+this.text+"';return  true;\">" + label + "</a></div>" +
		"<div id=\"" + this.id + "-cont\" class=\"webfx-tree-container\" style=\"display: " + ((this.open)?'block':'none') + ";\">";
	var sb = [];
	for (var i = 0; i < this.childNodes.length; i++) {
		sb[i] = this.childNodes[i].toString(i,this.childNodes.length);
	}
	this.plusIcon = ((this.parentNode._last)?webFXTreeConfig.lPlusIcon:webFXTreeConfig.tPlusIcon);
	this.minusIcon = ((this.parentNode._last)?webFXTreeConfig.lMinusIcon:webFXTreeConfig.tMinusIcon);
	return str + sb.join("") + "</div>";
}


/* 
 * xmlTree Class 
 */
function xmlTree(name) {
	this.name         = name;                   
	this.xmlFile      = 'xmltree.xml';          
	this.html         = '';                     
}

xmlTree.prototype.createXMLDOM = function() { //XMLDOM
	var xmldom;
	if (window.ActiveXObject) {
		xmldom = new ActiveXObject("Microsoft.XMLDOM");		
		if (!xmldom.load(this.xmlFile)) {
			this.html = 'Load XML Error!';
		}
	}
	else {
		if (document.implementation && document.implementation.createDocument) {
			xmldom = document.implementation.createDocument(this.xmlFile, "doc", null);
			if (xmldom == null) 
				this.html = 'Load XML Error!';
		}
	}		
	xmldom.async = false;
	xmldom.resolveExternals = false;
	xmldom.validateOnParse = false;
	xmldom.preserveWhiteSpace = true;	
	return xmldom;
}

xmlTree.prototype.createTree = function(treepanel){
	var xmldom = this.createXMLDOM();
	if (xmldom != null) {		
		var roots = xmldom.getElementsByTagName('root');
		if (roots != null) {
			var rtext, ricon, ropenicon, nodes, tree;	
			rtext = roots[0].getAttribute('text');
			ricon = roots[0].getAttribute('icon');
			ropenicon = roots[0].getAttribute('open-icon');
			tree = new WebFXTree(rtext,null,null,ricon,ropenicon);
			this.createNodes(roots[0], tree);
			this.html = tree;
		}
	}else{
		this.html = 'Load XML Error!';
	} 	
	document.getElementById(treepanel).innerHTML = this.html;
	return;
}

xmlTree.prototype.createLink = function(obj){
	var nlink = obj.firstChild.text;
	var ntarget = obj.getAttribute('target');
	var item=new Array(nlink,ntarget);
	return item;
}

xmlTree.prototype.creatDialog = function(obj){
	var nviewlink = obj.firstChild.text;
	var nwidth = obj.getAttribute('width');
	var nheight = obj.getAttribute('nheight');
	var nmodal = obj.getAttribute('modal');
	nwidth = (nwidth != '')? nwidth:'400';
	nheight = (nheight != '') ? nheight:'300';
	var naction;
	switch(nmodal){
		case 'Modal':
			naction = 'javascript: window.showModalDialog(\'' + nviewlink + '\', null, \'dialogWidth:' 
															+ nwidth + 'px; dialogHeight:' + nheight
															+ 'px; center:yes\');void(0);';	break;
								
		case 'Modeless':
			naction = 'javascript: window.showModelessDialog(\'' + nviewlink + '\', null, \'dialogWidth:' 
																	+ nwidth + 'px; dialogHeight:' + nheight
																	+ 'px; center:yes\');void(0);';	break;
		default:
			naction = 'javascript: window.open(\'' + nviewlink + '\', \'subWind\', \'width=' 
														+ nwidth + ',height=' + nheight
														+ '\');void(0);';  break;	
	}
	return naction;
}


xmlTree.prototype.createNodes = function(obj,parentnode) {
	var nitem;
	var nodes = obj.childNodes;

	if (nodes.length > 1 && nodes != null) {
		for (var i = 0; i < nodes.length; i++) {
			var ntext = nodes[i].getAttribute('text');
			var nicon = nodes[i].getAttribute('icon');
			var nopenicon = nodes[i].getAttribute('open-icon');				
				
			nitem = new WebFXTreeItem(ntext,null,null,nicon,nopenicon);
			if(!this.createNodes(nodes[i], nitem)){
				switch(nodes[i].nodeName){
					case 'link':
						var narray = this.createLink(nodes[i]);						
						nitem.setTarget(narray[1]);
						nitem.setAction(narray[0]);	
						break;
					case 'dialog':
						var naction = this.creatDialog(nodes[i]);
						nitem.setAction(naction); 
						break;
					default:
						nitem.setAction('javascript:void(0);');	
						break;						
				}
			}
			parentnode.add(nitem);
		}
		return true;
	}
	return false;
}