JXTree对象,读取外部xml文件数据,生成树的函数_Javascript教程-查字典教程网
JXTree对象,读取外部xml文件数据,生成树的函数
JXTree对象,读取外部xml文件数据,生成树的函数
发布时间:2016-12-30 来源:查字典编辑
摘要:/*******************************************JXTree对象,读取外部xml文件数据,生成树*@...

/******************************************

*JXTree对象,读取外部xml文件数据,生成树

*@authorbrull

*@emailbrull@163.com

*@date2007-03-27

*******************************************/

/*

*@paramxmlURLXML文件的地址

*/

varJXTree=function(xmlURL)

{

varresult=newArray();

/*****************************

*首先定义TreeNode抽象对象

*TreeNode对象属性:

*id唯一编号,必须在xml文件里定义为节点属性

*level节点层次,从-1开始(即根节点)

*_click节点click,在xml文件定义为节点属性[可选]

*isLast是否为本节点所在层次最后一个节点

*parent_isLast父节点是否为父节点所在层次的最后一个节点

*toHTML本节点转成HTML代码的方法

*******************************/

varTreeNode=function(node,level)

{

varparent_elements=node.parentNode?(node.parentNode.parentNode?node.parentNode.parentNode.childNodes:null):null;

varelements=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节点名称

******************************/

varElementNode=function(node,level)

{

TreeNode.apply(this,arguments);

this._nodeName=XMLDom.getAttribute(node,"name")?XMLDom.getAttribute(node,"name"):"";

this.toHTML=function(){

varresult="";

if(this.isLast)result+="<div><divclass='minus_bottom'";

elseresult+="<div><divclass='minus'";

result+="id='"+this.id+"_join'onclick="JXTree.changeState('"+this.id+"')"></div><divid='"+this.id+"_folder'class='folder_open'></div><spanclass='text'onclick=""+this._click+"">"+this._nodeName+"</span></div>";

returnresult;

}

}

/*****************************

*TexNode对象,继承自抽象对象TreeNode

*属性和TreeNode一样

*新增属性:

*_nodeValue节点值

******************************/

varTextNode=function(node,level)

{

TreeNode.apply(this,arguments);

this._nodeValue=node.firstChild.nodeValue;

this.toHTML=function(){

varresult="";

if(this.isLast)result+="<div><divclass='join_bottom'></div>";

elseresult+="<div><divclass='join'></div>";

result+="<divclass='page'></div><spanclass='text'id='"+this.id+"_item'onclick="JXTree.setFocus(this.id);"+this._click+"">"+this._nodeValue+"</span></div>";

returnresult;

}

}

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

varDOMRoot=XMLDom.loadXML(xmlURL).documentElement;//同步加载XML文件

varlevel=-1;//root节点level

varstack=newArray(1);

result.push("<div><divclass='root'></div><spanclass='text'>"+XMLDom.getAttribute(DOMRoot,"name")+"</span></div>");

//解释xml文件内容成树状态展开的HTML代码,递归调用

this.parseXML=function(node){

stack.push(level);

level++;

varelement=newElementNode(node,level);

varelements=node.childNodes;

if(level!=0){

if(element.isLast)

result.push("<divid='"+element.id+"_body'class='body_empty'>");

else

result.push("<divid='"+element.id+"_body'class='body_line'>");

}

for(vari=0;i<elements.length;i++){

if(elements.item(i).nodeName=="item"){//节点为树叶

vartextNode=newTextNode(elements.item(i),level);

result.push(textNode.toHTML());

textNode=null;//及时释放对象

}

elseif(elements.item(i).nodeType==1){//节点为树枝

varelementNode=newElementNode(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对象

returnresult.join("");

}

/*************静态属性***************/

JXTree.curText=null;//当前文本的id

/************静态方法***************/

JXTree.changeState=function(id){//展开或者收缩节点内容

var_body=document.getElementById(id+"_body");

var_join=document.getElementById(id+"_join");

varfolder=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;

}

}

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类