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


Posted in Javascript onApril 02, 2007

/******************************************
*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;
    }
}

Javascript 相关文章推荐
js文件中调用js的实现方法小结
Oct 23 Javascript
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
JavaScript 巧学巧用
May 23 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
新浪中用来显示flash的函数
Apr 02 #Javascript
我也种棵OO树JXTree[js+css+xml]
Apr 02 #Javascript
javascript中获取选中对象的类型
Apr 02 #Javascript
javascript实现动态增加删除表格行(兼容IE/FF)
Apr 02 #Javascript
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 #Javascript
在你的网页中嵌入外部网页的方法
Apr 02 #Javascript
关于文本限制字数的js代码
Apr 02 #Javascript
You might like
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
php实现json编码的方法
2015/07/30 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
javascript 面向对象继承
2009/11/26 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
Python深入学习之内存管理
2014/08/31 Python
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
Django开发中的日志输出的方法
2018/07/02 Python
使用tensorflow实现线性svm
2018/09/07 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
华为python面试题
2016/05/03 面试题
养殖项目策划书范文
2014/01/13 职场文书
英语教师岗位职责
2014/03/16 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
大学生助学金感谢信
2015/01/21 职场文书