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里怎么取select标签里的值并修改
Dec 10 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
vue二级路由设置方法
Feb 09 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 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
mysq GBKl乱码
2006/11/28 PHP
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
解析thinkphp基本配置 convention.php
2013/06/18 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
IE6 fixed的完美解决方案
2011/03/31 Javascript
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
javascript计时器详解
2015/02/28 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
Python3中函数参数传递方式实例详解
2019/05/05 Python
Python创建或生成列表的操作方法
2019/06/19 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
社区学习十八大感想
2014/01/22 职场文书
英文留学推荐信范文
2014/01/25 职场文书
大学军训感想
2014/02/12 职场文书
ktv筹备计划书
2014/05/03 职场文书
电力培训心得体会
2014/09/02 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
MySQL锁机制
2021/04/05 MySQL
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript