JXTree object, read external xml file data, function to generate tree

JXTree object, read external xml file data, function to generate tree_javascript skills

WBOY

Release： 2016-05-16 19:15:55

Original

1554 people have browsed it

/******************************************
*JXTree object, read external xml file data, spanning tree
*@author brull
*@email brull@163.com
*@date 2007-03-27
********** *****************************/

/*
*@param xmlURL XML文件的地址
*/
var JXTree = function(xmlURL)
{
    var result = new Array();

    /*****************************
*First define the TreeNode abstract object
*TreeNode object attributes:
*id unique Number, must be defined in the xml file as a node attribute
*level node level, starting from -1 (i.e. root node)
*_click node click, defined in the xml file as a node attribute [optional]
*isLast Whether it is the last node in the level where this node is located
*parent_isLast Whether the parent node is the last node in the level where the parent node is located
*toHTML How to convert this node into HTML code
****** *************************/
    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 object, inherited from abstract object TreeNode
*New attributes:
*_nodeName Node name
*****************************/
    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 object, inherited from abstract object TreeNode
*Attributes are the same as TreeNode
*New attributes:
*_nodeValue node value
***********************************/
    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 node construction is completed and the XML file begins to be interpreted*******************/

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

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

");
//Explain the HTML code to expand the content of the xml file into a tree state, call recursively
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") {// nodes are leaves
var textNode = new textNode (elements.item (i), level);
Result.push (textNode .toHTML());
textNode = null;//Release the object in time
var elementNode = new ElementNode(elements.item(i),level);
result.push(elementNode.toHTML());
elementNode = null;//Release the object in time This.parseXML(elements. item(i));
");
level = stack.pop();
}

//Get the interpretation result and return
this.getTree = function(){
this.parseXML(DOMRoot ); //The id of the current text

/***************Static properties*****************/
JXTree.changeState = function (id){//Expand or shrink the node content
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" )
};//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";