快捷導(dǎo)航

JXTree對象，讀取外部xml文件數(shù)據(jù)，生成樹的函數(shù)

更新時間：2007年04月02日 00:00:00 作者：

/******************************************
*JXTree對象，讀取外部xml文件數(shù)據(jù)，生成樹
*@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文件里定義為節(jié)點屬性
    *level 節(jié)點層次，從-1開始（即根節(jié)點）
    *_click 節(jié)點click，在xml文件定義為節(jié)點屬性[可選]
    *isLast 是否為本節(jié)點所在層次最后一個節(jié)點
    *parent_isLast 父節(jié)點是否為父節(jié)點所在層次的最后一個節(jié)點
    *toHTML 本節(jié)點轉(zhuǎn)成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;//節(jié)點的層次
        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 節(jié)點名稱
    ******************************/
    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 += "<div><div class='minus_bottom'";
            else result += "<div><div class='minus'";
            result += " id='"+this.id+"_join' onclick=\"JXTree.changeState('"+this.id+"')\"></div><div id='"+this.id+"_folder' class='folder_open'></div><span class='text' onclick=\""+this._click+"\">"+this._nodeName+"</span></div>";
            return result;
        }
    }

    /*****************************
    *TexNode對象，繼承自抽象對象TreeNode
    *屬性和TreeNode一樣
    *新增屬性：
    *_nodeValue 節(jié)點值
    ******************************/
    var TextNode = function(node,level)
    {
        TreeNode.apply(this,arguments);
        this._nodeValue = node.firstChild.nodeValue;
        this.toHTML = function(){
            var result = "";
            if(this.isLast) result += "<div><div class='join_bottom'></div>";
            else result += "<div><div class='join'></div>";
            result += "<div class='page'></div><span class='text' id='"+this.id +"_item' onclick=\"JXTree.setFocus(this.id);"+this._click+"\">"+this._nodeValue+"</span></div>";
            return result;
        }
    }

    /**********Node 節(jié)點構(gòu)建結(jié)束，開始解釋XML文件************/

    var DOMRoot=XMLDom.loadXML(xmlURL).documentElement;//同步加載XML文件
    var level = -1;//root節(jié)點level
    var stack = new Array(1);
    result.push("<div><div class='root'></div><span class='text'>"+XMLDom.getAttribute(DOMRoot,"name")+"</span></div>");
    //解釋xml文件內(nèi)容成樹狀態(tài)展開的HTML代碼，遞歸調(diào)用
    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;i<elements.length;i++){
            if(elements.item(i).nodeName == "item"){//節(jié)點為樹葉
                var textNode = new TextNode(elements.item(i),level);
                result.push(textNode.toHTML());
                textNode = null;//及時釋放對象
            }
            else if(elements.item(i).nodeType ==1){//節(jié)點為樹枝
                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();
    }

    //得到解釋結(jié)果并返回
    this.getTree = function(){
        this.parseXML(DOMRoot);
        DOMRoot = null;//釋放DOM對象
        return result.join("");
    }
    /*************靜態(tài)屬性***************/
    JXTree.curText = null;//當(dāng)前文本的id

    /************靜態(tài)方法***************/
    JXTree.changeState = function (id){//展開或者收縮節(jié)點內(nèi)容
        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;
    }
}