经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › js练习“树”，读取xml数据(无层次，结构简单)，兼容ie ...

查看: 17094|回复: 55

js练习“树”，读取xml数据(无层次，结构简单)，兼容ie&mf [已更新] [复制链接]

lapuasi　楼主

高级会员

帖子: 240
体力: 918
威望: 14

发表于 2005-12-19 02:21:00 |显示全部楼层

最近看到大家都练习写树，偶也学习学习写了一个，大家多多批评，我好进步，呵呵
不过我看了一些树的xml文档都是在xml中就已经有了树的结构，所以我写了一个xml文档不用分层，来生成树的，不过要给每个节点定义编号和父编号

写得有点糙，大家不要笑话，以后逐渐学习在改进

演示地址: http://www.lapuasi.com/javascript/xmltree

使用方法:
var tree = new xmlTree('tree'); //生成对象
tree.mode = 1; //设置初始模式，默认全部关闭。0全部关闭，1全部展开
tree.createTree(); //输出树

更新:
2005-12-25
　xml增加了target标签，可以定义连接打开位置
　修改了无连接节点点击跳回页面顶端的bug

Javascript代码:

/* JavaScript Document */

xmlTree v1.2
=================================

Infomation
----------------------
Author   : Lapuasi
E-Mail   : lapuasi@gmail.com
WebSite  : http://www.lapuasi.com/javascript
DateTime : 2005-12-25

Example
----------------------
var tree = new xmlTree('tree'); //生成对象
tree.mode = 1; //设置初始模式，默认全部关闭。0全部关闭，1全部展开
tree.createTree(); //输出树

for Internet Explorer, Mozilla Firefox
*/

function xmlTree(name) {
	this.name         = name;                   //实例名称
	this.xmlFile      = 'xmltree.xml';          //默认xml文件
	this.iconPath     = 'images/'               //默认图标路径
	this.iconFolder   = 'tree_icon_folder.gif'; //默认文件夹图标
	this.iconFile     = 'tree_icon_file.gif';   //默认文件图标
	this.iconOpen     = 'tree_arrow_open.gif';  //默认箭头展开图标
	this.iconOver     = 'tree_arrow_over.gif';  //默认箭头活动图标
	this.iconClose    = 'tree_arrow_close.gif'; //默认箭头关闭图标
	this.mode         = 0;                      //初始模式，默认全部关闭。0全部关闭，1全部展开
	this.html         = '';                     //最终输出html代码
	this.prevTip      = null;                   //上一次被显示的tip的时间编号 (内部使用)
	this.prevSelected = null;                   //上一次被选中的节点的自动编号 (内部使用)
}

xmlTree.prototype.createXMLDOM = function() { //生成XMLDOM对象
	var xmldom;
	if (window.ActiveXObject){
		var xmldom = new ActiveXObject("Microsoft.XMLDOM");
	} else {
		if (document.implementation && document.implementation.createDocument) {
			var xmldom = document.implementation.createDocument("","doc",null);
		}
	}
	xmldom.async = false;
	xmldom.resolveExternals = false;
	xmldom.validateOnParse = false;
	xmldom.preserveWhiteSpace = true;
	return xmldom;
}

xmlTree.prototype.createTree = function() { //生成并打印
	var xmldom = this.createXMLDOM();
	document.write('<div id="tree"><\/div>'); // 树所用层
	document.write('<div id="treeTip"><\/div>'); //提示所用层
	document.getElementById('treeTip').style.visibility = 'visible';
	document.getElementById('treeTip').style.display = 'none';
	if (xmldom.load(this.xmlFile)) {
		this.createNodes(xmldom);
	} else {
		this.html = 'Load XML Error';
	}
	document.getElementById('tree').innerHTML = this.html;
	return;
}

xmlTree.prototype.getFirstChildData = function(obj, name) { //取得指定名称节点的第一个子节点的数据
	var result = '';
	if (typeof(obj) == 'object' && name != null && name != '') {
		var node = obj.getElementsByTagName(name);
		if (node != null && node.length > 0) {
			result = node[0].firstChild.data;
		}
	}
	return result;
}

xmlTree.prototype.checkChildNodes = function(obj, id) { //检测是否有分支
	var result = false;
	var nodes = obj.getElementsByTagName('node');
	if (nodes != null && nodes.length > 0) {
		//var pid;
		for (var i = 0; i < nodes.length; i++) {
			//pid = nodes[i].getAttribute('parentid');
			if (nodes[i].getAttribute('parentid') == id) {
				result = true;
				break;
			}
		}
	}
	return result;
}

xmlTree.prototype.createNodes = function(obj, id) { //生成指定编号节点的树
	if (typeof(id) == 'undefined') id = null; //如果没有id传入则为根节点
	var nodes = obj.getElementsByTagName('node');
	if (nodes != null && nodes.length > 0) {
		var modeClass, modeSrc, iconClass, iconSrc;
		var nid, npid, nname, nicon, nlink, ntarget, nexplain, hasChildNodes;
		
		//判断模式类型，并应用样式
		modeClass = 'close';
		modeSrc = this.iconPath + this.iconClose;
		if (this.mode == 1) {
			modeSrc = this.iconPath + this.iconOpen;
			modeClass = 'open';
		}
		if (id == null) modeClass = 'open'; //若为根节点则显示
		this.html += '<ul id="tree_' + id + '_c" class="' + modeClass + '">';

for (var i = 0; i < nodes.length; i++) {
			npid = nodes[i].getAttribute('parentid');
			if (npid == id) {
				//初始化
				modeClass = 'close'; iconClass = 'icon-file'; iconSrc = this.iconPath + this.iconFile;

//取得节点编号并检测
				nid = nodes[i].getAttribute('id');
				this.html += '<li id="tree_' + nid + '"><span onclick="' + this.name + '.action(this,event);" onmouseover="' + this.name + '.action(this,event);" onmouseout="' + this.name + '.action(this,event);">';
				
				//取得节点自定义图标
				//判断是否含有子节点，并确定箭头和图标的图片及样式
				nicon = this.getFirstChildData(nodes[i], 'icon');
				hasChildNodes = this.checkChildNodes(obj, nid);
				if (hasChildNodes) {
					iconClass = '';
					iconSrc = this.iconPath + this.iconFolder;
					this.html += '<img id="tree_' + nid + '_a" src="' + modeSrc + '" class="arrow" \/>'; //箭头
				}
				if (nicon != '') iconSrc = nicon;
				this.html += '<img id="tree_' + nid + '_i" src="' + iconSrc + '" class="' + iconClass + '" \/>'; //图标

//取得节点连接
				nlink = this.getFirstChildData(nodes[i], 'link');
				if (nlink != '') {
					nlink = ' href="' + nlink + '"';
				} else {
					nlink = ' href="javascript:;"';
				}

//取得节点目标
				ntarget = this.getFirstChildData(nodes[i], 'target');
				if (ntarget != '') {
					ntarget = ' target="' + ntarget + '"';
				}

//取得节点说明
				nexplain = this.getFirstChildData(nodes[i], 'explain');
				if (nexplain != '') {
					nexplain = ' onmouseover="' + this.name + '.treeTips(\'' + nexplain + '\');" onmouseout="' + this.name + '.treeTips();"'
				}

//取得节点名称
				nname = this.getFirstChildData(nodes[i], 'name');
				this.html += '<a id="tree_' + nid + '_l" onclick="' + this.name + '.action(this,event);"' + nlink + ntarget + nexplain + '>' + nname + '<\/a><\/span>';

//obj.documentElement.removeChild(nodes[i]);
				if (hasChildNodes) this.createNodes(obj, nid); //迭代子节点

this.html += '<\/li>';
			}
		}
		this.html += '<\/ul>';
	}
	return;
}

xmlTree.prototype.action = function(obj, e) { //节点操作
	e = e ? e : (window.event ? window.event : null); //获取操作类型
	e = e.type;
	if (obj.tagName == 'A') {
		try { this.prevSelected.className = '';}
		catch(e) {}
		this.prevSelected = obj;
		obj.className = 'selected';
	}
	if (obj.tagName == 'SPAN') {
		var arrow = obj.firstChild; //取得箭头对象
		var borther = obj;
		while (borther.tagName != 'UL') { //取得分支对象
			borther = borther.nextSibling;
			if (borther == null) break;
		}
		if (borther != null) {
			switch (e) { //检测操作类型并执行相应代码
				case 'click':
					if (borther.className == 'open') {
						borther.className = 'close';
						arrow.src = this.iconPath + this.iconClose;
					} else {
						borther.className = 'open';
						arrow.src = this.iconPath + this.iconOpen;
					}
					break;
				case 'mouseover':
					if (arrow.tagName == 'IMG' && borther.className == 'close') {
						arrow.src = this.iconPath + this.iconOver;
					}
					break;
				case 'mouseout':
					if (arrow.tagName == 'IMG' && borther.className == 'close') {
						arrow.src = this.iconPath + this.iconClose;
					}
					break;
			}
		}
	}
	return;
}

xmlTree.prototype.treeTips = function(msg) { //提示栏
	if (this.prevTip != null) clearTimeout(this.prevTip);
	var obj = document.getElementById('treeTip');
	if (obj != null) {
		if (this.treeTips.arguments.length < 1) { // hide
			obj.style.display = 'none';
		} else { // show
			obj.innerHTML = msg;
			this.prevTip = setTimeout('document.getElementById("treeTip").style.display = "block"',300);
			document.onmousemove = this.moveToMouseLoc;
		}
	}
	return;
}

xmlTree.prototype.moveToMouseLoc = function(e) { //移动到鼠标所在位置
	var obj = document.getElementById('treeTip');
	if (obj != null) {
		var offsetX = -10, offsetY = 20;
		var x = 0, y = 0;
		if (window.event) {
			x = event.x + document.body.scrollLeft;
			y = event.y + document.body.scrollTop;
		} else {
			x = e.pageX;
			y = e.pageY;
		}
		obj.style.left = x + offsetX + 'px';
		obj.style.top = y + offsetY + 'px';
	}
	return;
}

提示：您可以先修改部分代码再运行

xml 数据:

<?xml version="1.0" encoding="utf-8"?>

<!--
CODE BY Lapuasi.com [2005-12-14]

Explain:
===================================================
node 为树的一个节点，具有以下属性和内容
	属性
		id: 编号，如果不唯一，只取第一个，其余被忽略 (必须, 可以是任意字符组合)
		parentid: 父编号，没有则为父节点 (可选, 可以是任意字符组合)
	内容
		name: 名称 (必须)
		link: 连接 (可选)
		target: 目标 (可选)
		icon: 图标 (可选)
		explain: 说明 (可选)
-->

<root>
	<node id="n1">
		<name>我的电脑</name>
		<icon>images/tree_icon_computer.gif</icon>
		<explain>显示连接到此计算机的驱动器和硬件</explain>
	</node>
	<node id="2" parentid="n1">
		<name>硬盘驱动器 (C:)</name>
		<icon>images/tree_icon_driver.gif</icon>
	</node>
	<node id="3">
		<name>网上邻居</name>
		<icon>images/tree_icon_net.gif</icon>
		<explain>显示到网站，网络计算机和FTP站点的快捷方式</explain>
	</node>
	<node id="4" parentid="n1">
		<name>硬盘驱动器 (D:)</name>
		<icon>images/tree_icon_driver.gif</icon>
	</node>
	<node id="5" parentid="2">
		<name>Windows</name>
	</node>
	<node id="6" parentid="3">
		<name>menu6</name>
	</node>
	<node id="7" parentid="3">
		<name>menu7</name>
	</node>
	<node id="8" parentid="3">
		<name>menu8</name>
	</node>
	<node id="9" parentid="7">
		<name>menu9</name>
	</node>
	<node id="10">
		<name>回收站</name>
		<icon>images/tree_icon_recycler.gif</icon>
		<explain>包含您已经删除的文件和文件夹</explain>
	</node>
	<node id="11" parentid="5">
		<name>system32</name>
	</node>
	<node id="12" parentid="11">
		<name>system.dll</name>
		<link>http://www.lapuasi.com</link>
		<target>_blank</target>
	</node>
	<node id="13" parentid="7">
		<name>menu13</name>
	</node>
	<node id="14" parentid="n1">
		<name>DVD 驱动器</name>
		<icon>images/tree_icon_cdrom.gif</icon>
	</node>
</root>

提示：您可以先修改部分代码再运行

已有 1 人评分	威望	收起理由
经典论坛大妈	+ 3	历史打分

总评分: 威望 + 3 查看全部评分

		自动登录	找回密码
密码			注册

js练习“树”，读取xml数据(无层次，结构简单)，兼容ie&mf [已更新] [复制链接]

js练习“树”，读取xml数据，兼容ie&mf

js练习“树”，读取xml数据，兼容ie&mf

js练习“树”，读取xml数据，兼容ie&mf

js练习“树”，读取xml数据，兼容ie&mf

js练习“树”，读取xml数据，兼容ie&mf

js练习“树”，读取xml数据，兼容ie&mf

js练习“树”，读取xml数据，兼容ie&mf

js练习“树”，读取xml数据，兼容ie&mf

js练习“树”，读取xml数据(无层次，结构简单)，兼容ie&mf

js练习“树”，读取xml数据(无层次，结构简单)，兼容ie&mf

js练习“树”，读取xml数据(无层次，结构简单)，兼容ie&mf

js练习“树”，读取xml数据(无层次，结构简单)，兼容ie&mf

js练习“树”，读取xml数据(无层次，结构简单)，兼容ie&mf

js练习“树”，读取xml数据(无层次，结构简单)，兼容ie&mf

js练习“树”，读取xml数据(无层次，结构简单)，兼容ie&mf

js练习“树”，读取xml数据(无层次，结构简单)，兼容ie&mf

js练习“树”，读取xml数据(无层次，结构简单)，兼容ie&mf

js练习“树”，读取xml数据(无层次，结构简单)，兼容ie&mf

js练习“树”，读取xml数据(无层次，结构简单)，兼容ie&mf

js练习“树”，读取xml数据(无层次，结构简单)，兼容ie&mf

js练习“树”，读取xml数据(无层次，结构简单)，兼容ie&mf

js练习“树”，读取xml数据(无层次，结构简单)，兼容ie&mf

js练习“树”，读取xml数据(无层次，结构简单)，兼容ie&mf

js练习“树”，读取xml数据(无层次，结构简单)，兼容ie&mf

js练习“树”，读取xml数据(无层次，结构简单)，兼容ie&mf

js练习“树”，读取xml数据(无层次，结构简单)，兼容ie&mf

js练习“树”，读取xml数据(无层次，结构简单)，兼容ie&mf

js练习“树”，读取xml数据(无层次，结构简单)，兼容ie&mf

js练习“树”，读取xml数据(无层次，结构简单)，兼容ie&mf

浏览过的帖子

浏览过的版块