Home > Web Front-end > JS Tutorial > JXTree object, read external xml file data, function to generate tree_javascript skills

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

WBOY
Release: 2016-05-16 19:15:55
Original
1569 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";
                                                                                                                                  
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template