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 相关文章推荐
图像替换新技术 状态域方法
Jan 28 Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
JS版微信6.0分享接口用法分析
Oct 13 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 Javascript
JS原形与原型链深入详解
May 09 Javascript
javascript递归函数定义和用法示例分析
Jul 22 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 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
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
ThinkPHP数据操作方法总结
2015/09/28 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
浅谈javascript的数据类型检测
2010/07/10 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
python通过线程实现定时器timer的方法
2015/03/16 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
Django框架模板介绍
2019/01/15 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
Python和Bash结合在一起的方法
2020/11/13 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
Html5自定义字体解决方法
2019/10/09 HTML / CSS
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
巴塞罗那观光通票:Barcelona Pass
2019/10/30 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
物流经理自我评价
2013/09/23 职场文书
房地产项目策划书
2014/02/05 职场文书
主题教育活动总结
2014/05/05 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
五一晚会主持词
2015/07/01 职场文书
创业计划书之物流运送
2019/09/17 职场文书
七年级作文之下雨天
2019/12/23 职场文书
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript
详解 TypeScript 枚举类型
2021/11/02 Javascript