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

程序员文章站 2022-04-07 23:04:55

...

/******************************************
*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 += "

else result += "

result += " id='"+this.id+"_join' onclick=\"JXTree.changeState('"+this.id+"')\">

"+this._nodeName+"

";
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 += "

";
else result += "

";
result += ""+this._nodeValue+"

";
return result;
}
}

/**********Node 节点构建结束，开始解释XML文件************/

var DOMRoot=XMLDom.loadXML(xmlURL).documentElement;//同步加载XML文件
var level = -1;//root节点level
var stack = new Array(1);
result.push("

"+XMLDom.getAttribute(DOMRoot,"name")+"

");
//解释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("

");
else
result.push("

");
}
for(var i=0;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("

");
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;
}
}