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(DHTML)中的一些技巧
Jan 09 Javascript
javascript脚本调试方法小结
Nov 24 Javascript
JS随即打乱数组实现代码
Dec 03 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
Vuex实现数据增加和删除功能
Nov 11 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压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
ES6入门教程之Class和Module详解
2017/05/17 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
JavaScript生成指定范围随机数和随机序列的方法
2018/05/05 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
Python实现类继承实例
2014/07/04 Python
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
车队司机自我鉴定
2014/03/02 职场文书
应聘英语教师求职信
2014/04/24 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
红色旅游心得体会
2014/09/03 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
教师病假条范文
2015/08/17 职场文书
各种货币符号快捷输入
2022/02/17 杂记
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers