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

槿丶少爷

槿丶少爷

2016-02-19 10:03

今天图老师小编要向大家分享个JXTree对象读取外部xml文件数据生成树的函数教程,过程简单易学,相信聪明的你一定能轻松get!
/******************************************
*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 += "divdiv class='minus_bottom'";
            else result += "divdiv class='minus'";
            result += " id='"+this.id+"_join' onclick="JXTree.changeState('"+this.id+"')"/divdiv id='"+this.id+"_folder' class='folder_open'/divspan 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 += "divdiv class='join_bottom'/div";
            else result += "divdiv class='join'/div";
            result += "div class='page'/divspan 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("divdiv class='root'/divspan 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;ielements.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;
    }
}
展开更多 50%)
分享

猜你喜欢

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

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

jsp读取大对象CLOB并生成xml文件示例

Web开发
jsp读取大对象CLOB并生成xml文件示例

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

ASP读取XML数据文件的方法

Web开发
ASP读取XML数据文件的方法

如何生成XML数据

Web开发
如何生成XML数据

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

如何读取XML文件内容

Web开发
如何读取XML文件内容

ASP中从数据库读取二进制文件数据代码

ASP
ASP中从数据库读取二进制文件数据代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

移动硬盘安装WinPE的步骤

移动硬盘安装WinPE的步骤

解析Android资源文件及他们的读取方法详解

解析Android资源文件及他们的读取方法详解
下拉加载更多内容 ↓