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 相关文章推荐
借助script进行Http跨域请求:JSONP实现原理及代码
Mar 19 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
jQuery实现友好的轮播图片特效
Jan 12 Javascript
js解决movebox移动问题
Mar 29 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 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
PHP执行速率优化技巧小结
2008/03/15 PHP
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
jquery foreach使用示例
2013/09/12 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
vue实现图片上传功能
2020/05/28 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
Python算法中的时间复杂度问题
2019/11/19 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
Linux文件系统类型
2012/09/16 面试题
集体婚礼证婚词
2014/01/13 职场文书
高中美术教学反思
2014/01/19 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
2014年民警工作总结
2014/11/25 职场文书
老乡聚会通知
2015/04/23 职场文书
MySQL创建定时任务
2022/01/22 MySQL