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 相关文章推荐
Jquery升级新版本后选择器的语法问题
Jun 02 Javascript
js渐变显示渐变消失示例代码
Aug 01 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 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
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
smarty简单分页的实现方法
2014/10/27 PHP
php header函数的常用http头设置
2015/06/25 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
微信小程序抽奖组件的使用步骤
2021/01/11 Javascript
win7安装python生成随机数代码分享
2013/12/27 Python
跟老齐学Python之list和str比较
2014/09/20 Python
在Linux下调试Python代码的各种方法
2015/04/17 Python
django用户登录和注销的实现方法
2018/07/16 Python
解决Python一行输出不显示的问题
2018/12/03 Python
numpy数组广播的机制
2019/07/12 Python
python tkinter实现屏保程序
2019/07/30 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
python性能测试工具locust的使用
2020/12/28 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
政风行风建设整改方案
2014/10/27 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
Python正则表达式中flags参数的实例详解
2022/04/01 Python