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写的一个自定义弹出式对话框代码
Jan 17 Javascript
jQuery Selector选择器小结
May 06 Javascript
js原型链原理看图说明
Jul 07 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
Javacript中自定义的map.js  的方法
Nov 26 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
vue配置接口域名方法总结
May 12 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
新浪中用来显示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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
2014过年倒计时示例
2014/01/31 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
php常用字符函数实例小结
2016/12/29 PHP
php常用的工具开发整理
2019/09/26 PHP
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
javascript下过滤数组重复值的代码
2007/09/10 Javascript
JQuery UI皮肤定制
2009/07/27 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
用Node提供静态文件服务的方法
2018/07/06 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
Python AES加密模块用法分析
2017/05/22 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
Python中的取模运算方法
2018/11/10 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
PyQt5实现画布小程序
2020/05/30 Python
python中常见错误及解决方法
2020/06/21 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
Weblogc domain问题
2014/01/27 面试题
《和我们一样享受春天》教学反思
2014/02/07 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL