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

/******************************************
*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 += "<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 节点值
    ******************************/
    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 节点构建结束,开始解释XML文件************/

var DOMRoot=XMLDom.loadXML(xmlURL).documentElement;//同步加载XML文件
    var level = -1;//root节点level
    var stack = new Array(1);
    result.push("<div><div class='root'></div><span 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;i<elements.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;
    }
}

(0)

相关推荐

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

    /****************************************** *JXTree对象,读取外部xml文件数据,生成树 *@author brull *@email brull@163.com *@date 2007-03-27 *******************************************/ /*  *@param xmlURL XML文件的地址  */ var JXTree = function(xmlURL) {     var result =

  • PHP读取并输出XML文件数据的简单实现方法

    本文实例讲述了PHP读取并输出XML文件数据的简单实现方法.分享给大家供大家参考,具体如下: config.XML文件: <?xml version="1.0" encoding="UTF-8"?> <node> <student> <name>张明</name> <email>1234567890@qq.com</email> <username>一样菜</use

  • JavaScript实现读取与输出XML文件数据的方法示例

    本文实例讲述了JavaScript实现读取与输出XML文件数据的方法.分享给大家供大家参考,具体如下: 一.介绍 通过JavaScript读取XML文档中数据的方法很多. 其根本的思路就是:首先在后台加载XML文档,然后通过JavaScript获取文档中所需的数据,最后应用HTML展示获取的数据. 二.获取XML元素的属性值的应用 下面应用attributes属性和getNamedItem()方法获取一个指定的XML文档中的属性值. 三.代码 首先创建一个XML文档,并且为指定的元素设置属性,程

  • JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)

    本文实例讲述了JS读取XML文件数据并以table形式显示数据的方法.分享给大家供大家参考,具体如下: 先看xml文件: <?xml version="1.0" standalone="yes"?> <student> <stuinfo> <stuName>张秋丽</stuName> <stuSex>女 </stuSex> <stuAge>18</stuAge>

  • php基于dom实现读取图书xml格式数据的方法

    本文实例讲述了php基于dom实现读取图书xml格式数据的方法.分享给大家供大家参考,具体如下: <?php $doc = new DOMDocument(); $doc->load( 'books.xml' ); $books = $doc->getElementsByTagName( "book" ); foreach( $books as $book ) { $authors = $book->getElementsByTagName( "aut

  • ajax读取properties资源文件数据的方法

    本文实例讲述了ajax读取properties资源文件数据的方法.分享给大家供大家参考.具体实现方法如下: properties资源文件的内容如下: hello=englishww name=english zk emailEmpty=Field cannot be empty! emailInvalid=Invalid email address! js调用ajax处理代码: $.ajax({ type:'POST', dataType:'json', url:'/jeecms/jeecms/

  • JAVA读取HDFS的文件数据出现乱码的解决方案

    使用JAVA api读取HDFS文件乱码踩坑 想写一个读取HFDS上的部分文件数据做预览的接口,根据网上的博客实现后,发现有时读取信息会出现乱码,例如读取一个csv时,字符串之间被逗号分割 英文字符串aaa,能正常显示 中文字符串"你好",能正常显示 中英混合字符串如"aaa你好",出现乱码 查阅了众多博客,解决方案大概都是:使用xxx字符集解码.抱着不信的想法,我依次尝试,果然没用. 解决思路 因为HDFS支持6种字符集编码,每个本地文件编码方式又是极可能不一样的

  • springboot读取application.yaml文件数据的方法

    本文实例为大家分享了springboot读取application.yaml文件数据的具体代码,供大家参考,具体内容如下 提示:以下是本篇文章正文内容,下面案例可供参考 一.创建并编辑对应的文件 1.application.yaml !!!这里一定要注意,datasource一定不能写成dataSource,因为会和Spring内部的产生冲突 server:   port: 8080 contry: china user:   - name: zhangsan     age: 18   - n

  • 一文详解Spring是怎么读取配置Xml文件的

    目录 Spring读取配置文件Document Element DocumentDefaultsDefinition Spring读取配置文件Document 在XmlBeanDefinitionReader.doLoadBeanDefinitions(InputSource inputSource, Resource resource)方法中将Xml文件转换成Document对象; Document doc = doLoadDocument(inputSource, resource); El

  • jQuery实现定时读取分析xml文件的方法

    本文实例讲述了jQuery实现定时读取分析xml文件的方法.分享给大家供大家参考.具体如下: 这里演示了jQuery如何通过ajax方式定时读取xml文件并分析. xml文件如下: <?xml version="1.0"?> <data> <page tasks="1" messages="3" notifications="3"/> </data> js文件如下: $(docu

随机推荐