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 相关文章推荐
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 Javascript
JQuery替换DOM节点的方法
Jun 11 Javascript
Position属性之relative用法
Dec 14 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
Vue.js用法详解
Nov 13 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 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取得一个类的属性和方法的实现代码
2011/05/22 PHP
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
在新窗口打开超链接的方法小结
2013/04/14 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
python的Template使用指南
2014/09/11 Python
Python实现控制台输入密码的方法
2015/05/29 Python
python在不同层级目录import模块的方法
2016/01/31 Python
Django日志模块logging的配置详解
2017/02/14 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
利用python求积分的实例
2019/07/03 Python
实例详解Python装饰器与闭包
2019/07/29 Python
手写一个python迭代器过程详解
2019/08/27 Python
python如何将两个txt文件内容合并
2019/10/18 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
Django nginx配置实现过程详解
2020/09/10 Python
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
关于Java finally的面试题
2016/04/27 面试题
专营店会计助理岗位职责
2013/11/29 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
房产公证书
2015/01/23 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android