js“树”读取xml数据

日期：2007年3月22日作者：查看:[大字体中字体小字体]

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

不过我看了一些树的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 : 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; }
[1] [2] [3] 下一页
js“树”读取xml数据相关文章：
·掌握SQL Server数据库的实用技巧
·Oracle非法数据库对象引起的错误
·SuSE Linux10上安装Oracle数据库方法
·sqlldr加载数据到不同表的问题
·在不同版本的SQL Server中存储数据
·缩小SQL Server数据库的日志文件
·SQL Server中导入导出数据的三种方式
·.Net中如何连接到ODBC数据源
·用SQL链接服务器访问远程Access数据库
·利用XMLHTTP无刷新添加数据
js“树”读取xml数据相关软件
·《魔兽》地图:冰火攻据战2.1正式版
·中兴数据通信产品速查手册V4
·数字数据网
·数据库营销
·李维的新书《Delphi 7高效数据库程序设计》
·0racle数据库应用管理解决方案
·96sql优化数据仓库解决方案文档合集
·电子商务互联网数据库试卷
·06年9月等级考试三级数据库技术试题
·Access数据库解疑专家

上一篇:新浪UC使用教程：查找好友的两种方式

下一篇:用GoLive实现CSS+DIV之二

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

js“树”读取xml数据

精品推荐

热点TOP10

特别推荐