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获取GridView选择的行内容
Apr 14 Javascript
Javascript中arguments对象详解
Oct 22 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
May 03 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
微信小程序中为什么使用var that=this
Aug 27 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合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
Python自动创建Excel并获取内容
2020/09/16 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
校园安全教育广播稿
2014/02/17 职场文书
委托书如何写
2014/08/30 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
离职证明范本(5篇)
2014/09/19 职场文书