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 相关文章推荐
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
JQuery获取浏览器窗口内容部分高度的代码
Feb 24 Javascript
用jquery写的一个万年历(自写)
Jan 20 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
Nov 26 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 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学习 变量使用总结
2011/03/24 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
ASP SQL防注入的方法
2008/12/25 Javascript
Javascript的闭包
2009/12/31 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
整理Python中的赋值运算符
2015/05/13 Python
Python分支结构(switch)操作简介
2018/01/17 Python
理解Django 中Call Stack机制的小Demo
2020/09/01 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
美国在线珠宝商店:SZUL
2017/02/11 全球购物
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
教师应聘自荐信范文
2014/03/14 职场文书
六五普法规划实施方案
2014/03/21 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python