JXTree对象，读取外部xml文件数据，生成树的函数

/****************************************** *JXTree对象，读取外部xml文件数据，生成树 *@author brull *@email brull@163.com *@date 2007-03-27 *******************************************/ /* *@param xmlURL XML文件的地址 */ var JXTree = function(xmlURL) { var result = new Array(); /***************************** *首先定义TreeNode抽象对象 *TreeNode对象属性： *id 唯一编号,必须在xml文件里定义为节点属性 *level 节点层次，从-1开始（即根节点） *_click 节点click，在xml文件定义为节点属性[可选] *isLast 是否为本节点所在层次最后一个节点 *parent_isLast 父节点是否为父节点所在层次的最后一个节点 *toHTML 本节点转成HTML代码的方法 *******************************/ var TreeNode = function (node,level) { var parent_elements = node.parentNode ? (node.parentNode.parentNode ? node.parentNode.parentNode.childNodes : null) : null; var elements = node.parentNode ? node.parentNode.childNodes : null; this.id = XMLDom.getAttribute(node,"id") ? XMLDom.getAttribute(node,"id") : ""; this.level = level;//节点的层次 this.isLast = elements ? ((elements.item(elements.length-2) === node) ? true : false) : false; this._click = XMLDom.getAttribute(node,'click') ? XMLDom.getAttribute(node,'click') : ""; this.toHTML = null;//function } /***************************** *ElementNode对象，继承自抽象对象TreeNode *新增属性： *_nodeName 节点名称 ******************************/ var ElementNode = function(node,level) { TreeNode.apply(this,arguments); this._nodeName = XMLDom.getAttribute(node,"name") ? XMLDom.getAttribute(node,"name") : ""; this.toHTML = function(){ var result = ""; if(this.isLast) result += "<div><div class='minus_bottom'"; else result += "<div><div class='minus'"; result += " id='"+this.id+"_join' onclick="JXTree.changeState('"+this.id+"')"></div><div id='"+this.id+"_folder' class='folder_open'></div><span class='text' onclick=""+this._click+"">"+this._nodeName+"</span></div>"; return result; } } /***************************** *TexNode对象，继承自抽象对象TreeNode *属性和TreeNode一样 *新增属性： *_nodeValue 节点值 ******************************/ var TextNode = function(node,level) { TreeNode.apply(this,arguments); this._nodeValue = node.firstChild.nodeValue; this.toHTML = function(){ var result = ""; if(this.isLast) result += "<div><div class='join_bottom'></div>"; else result += "<div><div class='join'></div>"; result += "<div class='page'></div><span class='text' id='"+this.id +"_item' onclick="JXTree.setFocus(this.id);"+this._click+"">"+this._nodeValue+"</span></div>"; return result; } } /**********Node 节点构建结束，开始解释XML文件************/ var DOMRoot=XMLDom.loadXML(xmlURL).documentElement;//同步加载XML文件 var level = -1;//root节点level var stack = new Array(1); result.push("<div><div class='root'></div><span class='text'>"+XMLDom.getAttribute(DOMRoot,"name")+"</span></div>"); //解释xml文件内容成树状态展开的HTML代码，递归调用 this.parseXML = function(node){ stack.push(level); level++; var element = new ElementNode(node,level); var elements = node.childNodes; if(level != 0){ if(element.isLast) result.push("<div id='"+element.id+"_body' class='body_empty'>"); else result.push("<div id='"+element.id+"_body' class='body_line'>"); } for(var i=0;i<elements.length;i++){ if(elements.item(i).nodeName == "item"){//节点为树叶 var textNode = new TextNode(elements.item(i),level); result.push(textNode.toHTML()); textNode = null;//及时释放对象 } else if(elements.item(i).nodeType ==1){//节点为树枝 var elementNode = new ElementNode(elements.item(i),level); result.push(elementNode.toHTML()); elementNode = null;//及时释放对象 this.parseXML(elements.item(i)); } } if(level != 0)result.push("</div>"); level = stack.pop(); } //得到解释结果并返回 this.getTree = function(){ this.parseXML(DOMRoot); DOMRoot = null;//释放DOM对象 return result.join(""); } /*************静态属性***************/ JXTree.curText = null;//当前文本的id /************静态方法***************/ JXTree.changeState = function (id){//展开或者收缩节点内容 var _body = document.getElementById(id + "_body"); var _join = document.getElementById(id+"_join"); var folder = document.getElementById(id+"_folder"); (_body.style.display == "none") ? ( _body.style.display = "block", _join.className = _join.className.replace("plus","minus"), folder.className = "folder_open" ) : ( _body.style.display = "none", _join.className = _join.className.replace("minus","plus"), folder.className = "folder_close" ) };//changeState JXTree.setFocus = function(id){ if(JXTree.curText) with(document.getElementById(JXTree.curText).style){ backgroundColor = ""; color = "#000"; } with( document.getElementById(id).style){ backgroundColor = "#003366"; color = "#FFF"; } JXTree.curText = id; } }

　　推荐阅读

　　ArrayList类（增强版）

Author:月影 From:http://bbs.51js.com/thread-66469-1-1.html 复制代码代码如下:<script> function ArrayList() { var ins = Array.apply(this, arguments); ins.constructor = arguments.callee; in>>>详细阅读

本文标题：JXTree对象，读取外部xml文件数据，生成树的函数

地址：http://www.17bianji.com/kaifa2/JS/30665.html

1/2 1