位置：首页>> 网络编程>> JavaScript>> js“树”读取xml数据源码

js“树”读取xml数据源码

作者：lapuasi　来源：蓝色理想　发布时间：2007-08-04 19:42:00　

标签：树,xml,js,Javascript

最近看到大家都练习写树，偶也学习学习写了一个，大家多多批评，我好进步。

不过我看了一些树的xml文档都是在xml中就已经有了树的结构，所以我写了一个xml文档不用分层，来生成树的，不过要给每个节点定义编号和父编号。

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

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

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

Javascript代码:

运行代码框
/* JavaScript Document *//*xmlTree v1.2=================================Infomation----------------------Author : LapuasiE-Mail : lapuasi@gmail.comWebSite : http://www.lapuasi.com/javascriptDateTime : 2005-12-25Example----------------------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) { // hideobj.style.display = 'none';} else { // showobj.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"?><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>

投稿

js“树”读取xml数据源码

猜你喜欢