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 相关文章推荐
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
Jul 13 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 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
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
Vue3 源码导读(推荐)
2019/10/14 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
原生js实现瀑布流效果
2020/03/09 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
python中logging包的使用总结
2018/02/28 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
python中np是做什么的
2020/07/21 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
介绍一下Ruby的多线程处理
2013/02/01 面试题
酒店led欢迎词
2014/01/09 职场文书
最美护士演讲稿
2014/08/27 职场文书
北京颐和园导游词
2015/01/30 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers