xtree.js 代码


Posted in Javascript onMarch 13, 2007
//** Powered by Fason 
//** Email: fason_pfx@hotmail.com var icon={ 
    root    :'image/root.gif', 
    open    :'image/open.png', 
    close    :'image/close.png', 
    file    :'image/file.png', 
    Rplus    :'image/Rplus.gif', 
    Rminus    :'image/Rminus.gif', 
    join    :'image/T.gif', 
    joinbottom:'image/L.gif', 
    plus    :'image/Tplus.gif', 
    plusbottom:'image/Lplus.gif', 
    minus    :'image/Tminus.gif', 
    minusbottom:'image/Lminus.gif', 
    blank    :'image/blank.gif', 
    line    :'image/I.gif' 
}; 
var Global={ 
    id:0, 
    getId:function(){return this.id++;}, 
    all:[], 
    selectedItem:null, 
    defaultText:"treeItem", 
    defaultAction:"javascript:void(0)", 
    defaultTarget:"_blank" 
} 
function preLoadImage(){ 
    for(i in icon){ 
        var tem=icon[i]; 
        icon[i]=new Image() 
        icon[i].src=tem 
    } 
};preLoadImage(); 
function treeItem(text,action,target,title,Icon) 
{ 
    this.id=Global.getId(); 
    this.level=0; 
    this.text=text?text:Global.defaultText; 
    this.action=action?action:Global.defaultAction; 
    this.target=target?target:Global.defaultTarget; 
    this.title=title?title:this.text; 
    this.isLast=true; 
    this.childNodes=new Array(); 
    this.indent=new Array(); 
    this.parent=null; 
    var c =0;  
    if(getCookie("item"+this.id) != null) c = getCookie("item"+this.id); 
    this.open=parseInt(c); 
    this.load=false; 
    this.setuped=false; 
    this.JsItem=null; 
    this.container=document.createElement("div"); 
    this.icon=Icon; 
    Global.all[Global.all.length]=this; 
} 
treeItem.prototype.toString = function() 
{ 
    var o = this; 
    var oItem = document.createElement("div"); 
    oItem.id = "treeItem"+this.id 
    oItem.className = "treeItem"; 
    oItem.noWrap = true; 
    oItem.onselectstart = function(){ return false;} 
    oItem.oncontextmenu = function(){ return false;} 
    this.JsItem = oItem; 
    this.drawIndents(); 
    var iIcon = document.createElement("img"); 
    iIcon.align = "absmiddle"; 
    iIcon.src = this.childNodes.length>0?(this.open?(this.level>0?(this.isLast?icon.minusbottom.src:icon.minus.src):icon.Rminus.src):(this.level>0?(this.isLast?icon.plusbottom.src:icon.plus.src):icon.Rplus.src)):(this.level>0?(this.isLast?icon.joinbottom.src:icon.join.src):icon.blank.src); 
    iIcon.id = "treeItem-icon-handle-" + this.id; 
    iIcon.onclick = function(){ o.toggle();}; 
    oItem.appendChild(iIcon); 
    var iIcon = document.createElement("img"); 
    iIcon.align = "absmiddle"; 
    iIcon.src = this.icon?this.icon:(this.childNodes.length>0?(this.open?icon.open.src:icon.close.src):icon.file.src); 
    iIcon.id = "treeItem-icon-folder-" + this.id; 
    iIcon.onclick = function(){ o.select();}; 
    iIcon.ondblclick = function(){ o.toggle();}; 
    oItem.appendChild(iIcon); 
    var eText = document.createElement("span"); 
    var eA=document.createElement("a"); 
    eA.innerHTML = this.text; 
    eA.target = this.target; 
    eA.href = this.action; 
    eA.onkeydown = function(e){ return o.KeyDown(e);} 
    if(this.action == Global.defaultAction) eA.onclick = function(){ o.toggle(); return false;} 
    eText.appendChild(eA); 
    eText.id = "treeItem-text-" + this.id; 
    eText.className = "treeItem-unselect" 
    eText.onclick = function(){ o.select(1);}; 
    eText.title = this.title; 
    oItem.appendChild(eText); 
    this.container.id = "treeItem-container-"+this.id; 
    this.container.style.display = this.open?"":"none"; 
    oItem.appendChild(this.container); 
    return oItem; 
} 
treeItem.prototype.root = function() 
{ 
    var p = this; 
    while(p.parent) 
        p = p.parent; 
    return p; 
} 
treeItem.prototype.setText = function(sText) 
{ 
    if(this.root().setuped) 
    { 
        var oItem = document.getElementById("treeItem-text-" + this.id); 
        oItem.firstChild.innerHTML = sText; 
    } 
    this.text = sText; 
} 
treeItem.prototype.setIndent = function(l,v) 
{ 
    for(var i=0;i<this.childNodes.length;i++) 
    { 
        this.childNodes[i].indent[l] = v; 
        this.childNodes[i].setIndent(l,v); 
    } 
} 
treeItem.prototype.drawIndents = function() 
{ 
    var oItem = this.JsItem; 
    for(var i=0;i<this.indent.length;i++){ 
        var iIcon = document.createElement("img"); 
        iIcon.align = "absmiddle"; 
        iIcon.id = "treeItem-icon-" + this.id + "-" + i; 
        iIcon.src = this.indent[i]?icon.blank.src:icon.line.src; 
        oItem.appendChild(iIcon); 
    } 
} 
treeItem.prototype.add = function(oItem) 
{ 
    oItem.parent=this; 
    this.childNodes[this.childNodes.length]=oItem; 
    oItem.level=this.level+1; 
    oItem.indent=this.indent.concat(); 
    oItem.indent[oItem.indent.length]=this.isLast; 
    if(this.childNodes.length>1){ 
        var o=this.childNodes[this.childNodes.length-2]; 
        o.isLast=false; 
        o.setIndent(o.level,0); 
        if(this.root().setuped)o.reload(1); 
    } 
    else if(this.root().setuped) 
        this.reload(0); 
    this.container.appendChild(oItem.toString()); 
    this.container.style.display=this.open?"":"none"; 
} 
treeItem.prototype.loadChildren = function() 
{ 
    //do something 
} 
treeItem.prototype.remove = function() 
{ 
    var tmp = this.getPreviousSibling(); 
    //if(tmp){ tmp.select();} 
    this.removeChildren(); 
    var p = this.parent; 
    if(!p){ return }; 
    if(p.childNodes.length>0){ 
        var o = p.childNodes[p.childNodes.length-1]; 
        o.isLast = true; 
        o.setIndent(o.level,1); 
        if(o.root().setuped)o.reload(1); 
    } 
    else 
        p.reload(); 
} 
treeItem.prototype.removeChildren = function () 
{ 
    if(this == Global.selectedItem){ Global.selectedItem = null;} 
    for(var i=this.childNodes.length-1;i>=0;i--) 
        this.childNodes[i].removeChildren(); 
    var o = this; 
    var p = this.parent; 
    if (p) { p.childNodes = p.childNodes._remove(o);} 
    Global.all[this.id] = null 
    var oItem = document.getElementById("treeItem"+this.id); 
    if (oItem) { oItem.parentNode.removeChild(oItem); } 
} 
treeItem.prototype.reload = function(flag) 
{ 
    if (flag){ 
        for(var j=0;j<this.childNodes.length;j++){ this.childNodes[j].reload(1);} 
        for(var i=0;i<this.indent.length;i++) 
            document.getElementById("treeItem-icon-" +this.id+ "-"+i).src = this.indent[i]?icon.blank.src:icon.line.src; 
    } 
    document.getElementById("treeItem-icon-handle-" +this.id).src = this.childNodes.length>0?(this.open?(this.level>0?(this.isLast?icon.minusbottom.src:icon.minus.src):icon.Rminus.src):(this.level>0?(this.isLast?icon.plusbottom.src:icon.plus.src):icon.Rplus.src)):(this.level>0?(this.isLast?icon.joinbottom.src:icon.join.src):icon.blank.src); 
    if (!this.icon) 
        document.getElementById("treeItem-icon-folder-"+this.id).src = this.childNodes.length>0?(this.open?icon.open.src:icon.close.src):icon.file.src; 
} 
treeItem.prototype.toggle = function() 
{ 
    if(this.childNodes.length>0){ 
        if(this.open) 
            this.collapse(); 
        else 
            this.expand(); 
    } 
} 
treeItem.prototype.expand = function() 
{ 
    this.open=1; 
    setCookie("item"+this.id,1); 
    if(!this.load){ 
        this.load=true; 
        this.loadChildren(); 
        this.reload(1); 
    } 
    else  
        this.reload(0); 
    this.container.style.display = ""; 
} 
treeItem.prototype.collapse = function() 
{ 
    this.open=0; 
    setCookie("item"+this.id,0); 
    this.container.style.display = "none"; 
    this.reload(0); 
    this.select(1); 
} 
treeItem.prototype.expandAll = function() 
{ 
    if(this.childNodes.length>0 && !this.open)this.expand(); 
    this.expandChildren(); 
} 
treeItem.prototype.collapseAll = function() 
{ 
    this.collapseChildren(); 
    if(this.childNodes.length>0 && this.open)this.collapse(); 
} 
treeItem.prototype.expandChildren = function() 
{ 
    for(var i=0;i<this.childNodes.length;i++) 
    this.childNodes[i].expandAll(); 
} 
treeItem.prototype.collapseChildren = function() 
{ 
    for(var i=0;i<this.childNodes.length;i++) 
    this.childNodes[i].collapseAll() 
} 
treeItem.prototype.openURL=function() 
{ 
    if(this.action!=Global.defaultAction){ 
        window.open(this.action,this.target); 
    } 
} 
treeItem.prototype.select=function(o) 
{ 
    if (Global.selectedItem) Global.selectedItem.unselect(); 
    var oItem = document.getElementById("treeItem-text-" + this.id); 
    oItem.className = "treeItem-selected"; 
    oItem.firstChild.focus(); 
    Global.selectedItem = this; 
    if(!o) this.openURL(); 
} 
treeItem.prototype.unselect=function() 
{ 
    var oItem = document.getElementById("treeItem-text-" + this.id); 
    oItem.className = "treeItem-unselect"; 
    oItem.firstChild.blur(); 
    Global.selectedItem = null; 
} 
treeItem.prototype.setup = function(oTaget) 
{ 
    oTaget.appendChild(this.toString()); 
    this.setuped = true; 
    if(this.childNodes.length>0 || this.open) this.expand(); 
} 
/**********************************************/ 
/* 
    Arrow Key Event 
*/ 
/**********************************************/ 
treeItem.prototype.getFirstChild = function() 
{ 
    if(this.childNodes.length>0 && this.open) 
        return this.childNodes[0]; 
    return this; 
} 
treeItem.prototype.getLastChild = function() 
{ 
    if(this.childNodes.length>0 && this.open) 
        return this.childNodes[this.childNodes.length-1].getLastChild(); 
    return this; 
} 
treeItem.prototype.getPreviousSibling = function() 
{ 
    if(!this.parent) return null; 
    for(var i=0;i<this.parent.childNodes.length;i++) 
        if(this.parent.childNodes[i] == this)break; 
    if(i == 0)  
        return this.parent; 
    else 
        return this.parent.childNodes[i-1].getLastChild(); 
} 
treeItem.prototype.getNextSibling = function() 
{ 
    if(!this.parent) return null; 
    for(var i=0;i<this.parent.childNodes.length;i++) 
        if(this.parent.childNodes[i] == this)break; 
    if(i == this.parent.childNodes.length-1) 
        return this.parent.getNextSibling(); 
    else 
        return this.parent.childNodes[i+1]; 
} 
treeItem.prototype.KeyDown=function(e){ 
    var code,o; 
    if(!e) e = window.event; 
    code = e.which ? e.which : e.keyCode; 
    o = this; 
    if(code == 37) 
    { 
        if(o.open) o.collapse(); 
        else 
        { 
            if(o.parent) o.parent.select(); 
        } 
        return false; 
    } 
    else if(code == 38) 
    { 
        var tmp = o.getPreviousSibling(); 
        if(tmp) tmp.select(); 
        return false; 
    } 
    else if(code == 39) 
    { 
        if(o.childNodes.length>0) 
        { 
            if(!o.open) o.expand(); 
            else 
            { 
                var tmp = o.getFirstChild(); 
                if(tmp) tmp.select(); 
            } 
        } 
        return false; 
    } 
    else if(code == 40) 
    { 
        if(o.open&&o.childNodes.length>0)o.getFirstChild().select(); 
        else 
        { 
            var tmp = o.getNextSibling(); 
            if(tmp) tmp.select(); 
        } 
        return false; 
    } 
    else if(code == 13) 
    { 
        o.toggle(); 
        o.openURL(); 
        return false; 
    } 
    return true; 
} 
/*****************************************************/ 
Array.prototype.indexOf=function(o){ 
    for(var i=0;i<this.length;i++) 
        if(this[i]==o)return i; 
    return -1; 
} 
Array.prototype.removeAt=function(i){ 
    return this.slice(0,i).concat(this.slice(i+1)) 
} 
Array.prototype._remove=function(o){ 
    var i=this.indexOf(o); 
    if(i!= -1) return this.removeAt(i) 
    return this 
} 
/*****************************************************/ 
/*****************************************************/ 
/* 
    xtreeItem Class 
*/ 
/*****************************************************/ 
function xtreeItem(uid,text,action,target,title,Icon,xml){ 
    this.uid=uid; 
    this.base=treeItem; 
    this.base(text,action,target,title,Icon); 
    this.Xml=xml; 
} 
xtreeItem.prototype=new treeItem; 
xtreeItem.prototype.parseElement=function(dom){ 
    return dom.selectSingleNode("/TreeNode"); 
} 
xtreeItem.prototype.addNodesLoop = function(oItem) 
{ 
    for(var i=0;i<oItem.childNodes.length;i++) 
    { 
        var o = oItem.childNodes[i]; 
        var tmp = new xtreeItem(o.getAttribute("id"),o.getAttribute("text"),o.getAttribute("href"),o.getAttribute("target"),o.getAttribute("title"),o.getAttribute("icon"),o.getAttribute('Xml')); 
        this.add(tmp); 
        if(o.getAttribute("Xml")) tmp.add(new treeItem("Loading...")); 
        else 
        { 
            tmp.load=true; 
            tmp.addNodesLoop(o); 
        } 
    } 
} 
xtreeItem.prototype.loadChildren=function() 
{ 
    var oItem = this; 
    var oLoad = oItem.childNodes[0]; 
    var XmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    XmlHttp.onreadystatechange=function(){ 
        if(XmlHttp.readyState==4){ 
            if(XmlHttp.status==200){ 
                if(XmlHttp.responseXML.xml == ""){ oLoad.setText("unavaible1");return;} 
                var XmlItem=oItem.parseElement(XmlHttp.responseXML.documentElement); 
                if(XmlItem.childNodes.length == 0){ oLoad.setText("unavaible") } 
                else 
                { 
                    oItem.addNodesLoop(XmlItem); 
                    for(var i=0;i<oItem.childNodes.length;i++) 
                    { 
                        if(parseInt(getCookie("item"+oItem.childNodes[i].id)) ==1) 
                        { oItem.childNodes[i].expand();} 
                    } 
                    if(Global.selectedItem == oItem.childNodes[0])oItem.select(); 
                    oLoad.remove(); 
                } 
            } 
            else{ 
                oLoad.setText("unavaible"); 
            } 
            XmlHttp = null; 
            oItem.select(1); 
        } 
    } 
    try{ 
        XmlHttp.open("get",this.Xml+(/\?/g.test(this.Xml)?"&":"?")+"temp="+Math.random(),true); 
        XmlHttp.send(); 
    }catch(e){ oLoad.setText("unavaible");} 
} 
xtreeItem.prototype.setup=function(oTarget){ 
    this.add(new treeItem("Loading...")); 
    oTarget.appendChild(this.toString()); 
    this.setuped=true; 
    if(this.childNodes.length>0 || this.open) this.expand(); 
} 
/*****************************************************/ 
function setCookie(name,value) 
{ 
    var Days = 7;  
    var exp  = new Date(); 
    exp.setTime(exp.getTime() + Days*24*60*60*1000); 
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
} 
function getCookie(name) 
{ 
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)")); 
    if(arr != null) return unescape(arr[2]); return null; 
} 
function delCookie(name) 
{ 
    var exp = new Date(); 
    exp.setTime(exp.getTime() - 1); 
    var cval=getCookie(name); 
    if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString(); 
}
Javascript 相关文章推荐
浅谈JavaScript中面向对象技术的模拟
Sep 25 Javascript
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 Javascript
js输出列表实现代码
Sep 12 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
js中 javascript:void(0) 用法详解
Aug 11 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 Javascript
js资料prototype 属性
Mar 13 #Javascript
js资料toString 方法
Mar 13 #Javascript
pjblog修改技巧汇总
Mar 12 #Javascript
解决 firefox 不支持 document.all的方法
Mar 12 #Javascript
收藏一些不常用,但是有用的代码
Mar 12 #Javascript
图片自动缩小的js代码,用以防止图片撑破页面
Mar 12 #Javascript
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 #Javascript
You might like
PHP安装攻略:常见问题解答(二)
2006/10/09 PHP
php中static静态变量的使用方法详解
2010/06/04 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
python的keyword模块用法实例分析
2015/06/30 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
python如何爬取个性签名
2018/06/19 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
高中微机老师自我鉴定
2014/02/16 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
检讨书格式
2015/05/07 职场文书
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python
JavaScript 原型与原型链详情
2021/11/02 Javascript