newxtree.js代码


Posted in Javascript onMarch 13, 2007

/*=========================================
        Powered by Fason
        Email: fason_pfx@hotmail.com
        HomePage:http://fason.nease.net
        Version:3.0
=========================================*/

var TreeConfig = {
    TreeIcon            :{
        root                :'root.gif',
        folderopen            :'folderopen.gif',
        folder                :'folder.gif',
        file                :'file.gif',
        Rplus                :'Rplus.gif',
        Rminus                :'Rminus.gif',
        join                :'T.gif',
        joinbottom            :'L.gif',
        plus                :'Tplus.gif',
        plusbottom            :'Lplus.gif',
        minus                :'Tminus.gif',
        minusbottom            :'Lminus.gif',
        blank                :'blank.gif',
        line                :'I.gif'
    },
    defaultText            :"New",
    defaultHref            :"javascript:void(0)",
    defaultTarget        :"_blank",
    loadingText            :"Loading...",
    unavaibleText        :"Unavaible",
    useCookie            :true,
    contextmenu            :null
};

var TreeHandler = {
    id                    :0,
    all                    :{},
    getId                :function (obj, key) {
        var ID = key == null ? this.id :key;
        this.all[ID] = obj;
        return key==null ? this.id++ : key;
    },
    setImagePath        :function(sPath){
        for (i in TreeConfig.TreeIcon) {
            var tem = new Image();
            tem.src = sPath + TreeConfig.TreeIcon[i];
            TreeConfig.TreeIcon[i] = tem.src;
        }
    }
};

//*************
//    WebCookie
//*************
var WebCookie = new function () {

    this.setValue = function (sName, sValue, sExpire, sPath, sDomain, sSecure) {
        var cookie = sName + "=" + escape(sValue);
        if (sExpire) cookie += "; expires=" + sExpire.toGMTString();
        if (sPath) cookie += "; path=" + sPath;
        if (sSecure) cookie += "; secure";
        document.cookie = cookie;
    };

    this.getValue = function (sName) {
        var c = document.cookie.split("; ");
        for (var i=0; i<c.length; i++) {
            var cItem = c[i].split("=");
            if (cItem[0] == sName) return unescape(cItem[1]);
        }
        return null;
    };

    this.delCookie = function (sName) {
        var cVal = this.getValue(sName);
        if (cVal != null) {
            var d = new Date();d.setTime(d.getTime()-1);
            this.setValue(sName, cVal, d);
        }
    };
};

//**************
// TreeNode
//**************
Array.prototype.Remove = function(o){
    for (var i=0; i<this.length; i++) {
        if (this[i] == o) break;
    }
    if (i != this.length) return this.slice(0,i).concat(this.slice(i+1,this.length));
    return this;
};

function TreeNode(sKey, sText, sHref, sTarget, sTitle, sIcon, sOpenIcon, sXMLSrc) {
    this.id            = TreeHandler.getId(this, sKey);
    this.level        = 0;
    this.text        = sText ? sText : TreeConfig.defaultText;
    this.href        = sHref ? sHref : TreeConfig.defaultHref;
    this.target        = sHref ? (sTarget ? sTarget : TreeConfig.defaultTarget) : "_self";
    this.title        = sTitle ? sTitle : this.text;
    this.childNodes    = new Array();
    this.parentNode    = null;
    this.open        = TreeConfig.useCookie ? this.getOpen() : 0;
    this.shown        = false;
    this.icon        = sIcon;
    this.openIcon    = sOpenIcon;
    this.src        = sXMLSrc;
    this._tree        = null;
    this.onexpand    = null;
    this.oncollapse    = null;
    this.onselect    = null;
    this.toElement();
    if (sXMLSrc) {
        this.open = 0;
        this.loader = new this.constructor(null, TreeConfig.loadingText, null, null, null);
        this.add(this.loader);
    }
};

TreeNode.prototype.toElement = function () {
    var f = typeof(this.href) == "function";
    var oThis = this;
    this._item = document.createElement("div");
    this._item.className = "TreeNode";
    this._item.noWrap = true;
    this._item.onselectstart = function(){ return false;}
    this._handler = document.createElement("img");
    this._handler.align = "absmiddle";
    this._handler.onclick = function(){ oThis.toggle();};
    this._item.appendChild(this._handler);
    this._icon = document.createElement("img");
    this._icon.align = "absmiddle";
    //this._icon.onclick = function(){ oThis.select(true); };
    this._icon.onclick = function(){ oThis.toggle(); };   //superj修改,单击图标为展开
    this._icon.ondblclick = function(){ oThis.toggle(); };
    this._item.appendChild(this._icon);
    this._anchor = document.createElement("a");
    this._anchor.className = "TreeNode-Anchor"
    this._anchor.innerHTML = this.HTMLtoText(this.text);
    this._anchor.target = f ? "_self" : this.target;
    this._anchor.href = f ? TreeConfig.defaultHref : this.href;
    this._anchor.title = this.title;
    //this._anchor.onmousedown = function(e){ return oThis.contextMenu(e); };
    this._anchor.onmousedown = function(){ oThis.toggle(); };   //superj修改,单击标签为展开
    this._anchor.onfocus = function(){ oThis.focus(); }
    this._anchor.onblur = function(){ oThis.blur(); };
    this._anchor.onkeydown = function(e){ return oThis.KeyDown(e);}
    this._item.appendChild(this._anchor);
    this._container = document.createElement("div");
    this._container.style.display = this.open ? "" : "none";
    this._item.appendChild(this._container);
};

TreeNode.prototype.HTMLtoText = function (s) {
    return String(s).replace(/&/g, "&").replace(/\"/g, '"').replace(/</g,'<').replace(/>/g, '>');
};

TreeNode.prototype.isLast = function () {
    var p = this.parentNode;
    if (p == null) return false;
    return p.childNodes[p.childNodes.length - 1] == this;
};

TreeNode.prototype.indent = function () {
    for (var i=0; i<this.childNodes.length; i++) { this.childNodes[i].indent(); }
    var t = this._item, iv = this.level;
    if (iv) while (--iv) { t.removeChild(t.firstChild); }
    var node = this.parentNode, v = 0, _root = this.getRoot();
    while (node) {
        v++;
        if (node == _root) break;
        var m = document.createElement("img");
        m.align = "absmiddle";
        m.src = node.isLast() ? TreeConfig.TreeIcon.blank : TreeConfig.TreeIcon.line;
        t.insertBefore(m, t.firstChild);
        node = node.parentNode;
    }
    this.level = v;
};

TreeNode.prototype.recalIndent = function (nLevel, b) {
    for (var i = 0; i<this.childNodes.length; i++) {
        this.childNodes[i]._item.childNodes[nLevel-1].src = b ? TreeConfig.TreeIcon.blank : TreeConfig.TreeIcon.line;
        this.childNodes[i].recalIndent(nLevel, b);
    }
};

TreeNode.prototype.reloadIcon = function () {
    var l = this.isLast(), o = this.open, m = TreeConfig.TreeIcon;
    if (this.parentNode) {
        this._handler.src = this.childNodes.length>0 ? (o ? (l ? m.minusbottom : m.minus) : (l ? m.plusbottom : m.plus)) : (l ? m.joinbottom : m.join);
    }
    this._icon.src = this.childNodes.length>0 ? (o ? (this.openIcon ? this.openIcon : (this.icon ? this.icon : m.folderopen)) : (this.icon ? this.icon : m.folder)) : (this.icon ? this.icon : m.file);
};

TreeNode.prototype.addXMLNodeLoop = function (doc) {
    var c = doc.childNodes;
    for (var i = 0; i < c.length; i++) {
        var o = c[i];
        if (o.nodeType == 1) {
            var X = this.constructor;
            var node = new X(o.getAttribute("id"), o.getAttribute("text"), o.getAttribute("href"), o.getAttribute("target"), o.getAttribute("title"), o.getAttribute("icon"), o.getAttribute("openicon"), o.getAttribute('src'));
            this.add(node);
            if (!o.getAttribute("src")) {
                node.addXMLNodeLoop(o);
            }
        }
    }
};

TreeNode.prototype.XMLHttpCallBack = function () {
    if (this._xmlhttp.readyState != 4) return;
    var oLoad = this.loader;
    var doc = this._xmlhttp.responseXML;
    var sXML = String(this._xmlhttp.responseText).replace(/<\?xml[^\?]*\?>/i, "");
    if (window.DOMParser) {
        doc = (new DOMParser()).parseFromString(sXML, 'text/xml');    
    } else {
        doc.loadXML(sXML);
    }
    if (doc.documentElement) {
        var oRoot = doc.getElementsByTagName("Tree")[0];
        if (oRoot.childNodes.length == 0) { this.setText(TreeConfig.unavaibleText); }
        else {
            var s = this._tree.getSelectedNode() == oLoad;
            this.addXMLNodeLoop(oRoot);
            oLoad.remove();
            this.async();
            this.loader = null;
        }
    }
    else {
        oLoad.setText(TreeConfig.unavaibleText);
    }
};

TreeNode.prototype.getXML = function () {
    var oLoad = this.loader;
    var oThis = this;
    this._xmlhttp = null;
    try{
        if (window.XMLHttpRequest) 
            this._xmlhttp = new XMLHttpRequest();
        else if (window.ActiveXObject)
            this._xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }catch (e){}
    if (this._xmlhttp == null) throw new Error('Your browser doesn\'t support!');
    this._xmlhttp.onreadystatechange = function () { oThis.XMLHttpCallBack(); };
    try {
        var temp = (/\?/g.test(this.src)?"&":"?") + "temp=" + String(new Date().getTime())
        this._xmlhttp.open("get", this.src + temp, true);
        this._xmlhttp.send(null);
    }catch(e){ oLoad.setText(TreeConfig.unavaibleText);}
};

TreeNode.prototype.resetTree = function (oTree) {
    for (var i=0; i<this.childNodes.length; i++)
        this.childNodes[i].resetTree(oTree);
    this._tree = oTree;
};

TreeNode.prototype.setOpen = function (v) {
    this.open = v;
    if (TreeConfig.useCookie) {
        WebCookie.setValue("o" + this.id, v);
    }
};

TreeNode.prototype.getOpen = function () {
    var o = WebCookie.getValue("o" + this.id);
    if (o != null)
        return parseInt(o);
    return 0;
};

TreeNode.prototype.toHTML = function() {
    var o = this._item;
    this.indent();
    this.reloadIcon();
    if (this.parentNode == null) o.removeChild(this._handler);
    return o;
};    

TreeNode.prototype.getRoot = function() {
    var root = this;
    while (root.parentNode) root = root.parentNode;
    return root;
};    

TreeNode.prototype.setText = function(sText) {
    this.text = sText;
    this._anchor.innerHTML = this.HTMLtoText(sText);
};

TreeNode.prototype.add = function(oItem) {
    var tree = this._tree;
    oItem.parentNode = this;
    var len = this.childNodes.length;
    this.childNodes[len] = oItem;
    if (len > 0) {
        var o = this.childNodes[len-1];
        o.recalIndent(o.level, false);
        o.reloadIcon();
    } else if (tree) {
        if (tree._rendered) this.open = 0;
        this.reloadIcon();
    }
    if (tree) this.resetTree(tree);
    this._container.style.display = this.open ? "" : "none";
    this._container.appendChild(oItem.toHTML());
    return oItem;
};

TreeNode.prototype.remove = function(f) {
    for (var i=0; i<this.childNodes.length; i++) { this.childNodes[i].remove(true); }
    this.unselect();
    var v = this.getPreviousSibling();
    var p = this.parentNode;
    if (p) {
        p.childNodes = p.childNodes.Remove(this);
        if (p.childNodes.length > 0) {
            var node = p.childNodes[p.childNodes.length-1];
            node.recalIndent(node.level, true);
            node.reloadIcon();
        } else {
            p.setOpen(0);
            p._container.style.display = "none";
            p.reloadIcon();
        }
    }
    var tmp = this._item;
    if (tmp) tmp.parentNode.removeChild(tmp);
    delete TreeConfig[this.id];
    if (v && !f) v.select(false);
};

TreeNode.prototype.toggle = function() {
    if (this.childNodes.length>0) {
        if (this.open) {
            this.collapse();
        }
        else {
            this.expand();
        }
    }
};

TreeNode.prototype.expand = function() {
    this.setOpen(1);
    if (! this.shown) {
        this.shown = true;
        if (this.src) this.getXML();
    }
    this.reloadIcon();
    this._container.style.display = "";
    if (typeof this.onexpand == "function") {
        this.onexpand();
    } else {
        eval(this.onexpand);
    }
};

TreeNode.prototype.collapse = function() {
    this.setOpen(0);
    this._container.style.display = "none";
    this.reloadIcon();
    this.select(false);
    if (typeof this.oncollapse == "function") {
        this.oncollapse();
    } else {
        eval(this.oncollapse);
    }
};

TreeNode.prototype.async = function () {
    var a = this._tree.context;
    if (!a.length) return;
    var id = a[a.length - 1];
    var node = TreeHandler.all[id];
    if (typeof(node) != 'undefined') {
        if (node.parentNode == this) {
            this._.context = a.slice(0, -1);
            if (node.childNodes.length > 0)
                node.expand();
            else 
                node.select();
        }
    }
};

TreeNode.prototype.expandAll = function() {
    if (this.childNodes.length>0 && !this.open) this.expand();
    this.expandChildren();
};

TreeNode.prototype.collapseAll = function() {
    this.collapseChildren();
    if (this.childNodes.length>0 && this.open) this.collapse();
};

TreeNode.prototype.expandChildren = function() {
    for (var i=0; i<this.childNodes.length; i++)
        this.childNodes[i].expandAll();
};

TreeNode.prototype.collapseChildren = function() {
    for (var i=0; i<this.childNodes.length; i++)
        this.childNodes[i].collapseAll();
};

TreeNode.prototype.openURL = function() {
    if (typeof this.href == "function") {
        this.href();
    } else if (this.href != TreeConfig.defaultHref) {
        window.open(this.href, this.target);
    }
};

TreeNode.prototype.select = function(b){
    this._anchor.focus();
    if (b) {
        this.openURL();
    }
};

TreeNode.prototype.unselect = function () {
    this._anchor.className = "TreeNode-Anchor";
    var selected = this._tree.getSelectedNode();
    if (selected == this) this._tree.setSelectedNode(null);
};

TreeNode.prototype.focus = function () {
    var node = this._tree.getSelectedNode();
    if (node && node != this) { node.unselect(); }
    this._tree.setSelectedNode(this);
    var oItem = this._anchor;
    oItem.className =  "TreeNode-Anchor focus";
    if (typeof this.onselect == "function") {
        this.onselect();
    } else {
        eval(this.onselect);
    }
};

TreeNode.prototype.blur = function () {
    var oItem = this._anchor;
    oItem.className =  "TreeNode-Anchor selected";
};

TreeNode.prototype.contextMenu = function (e) {
    e = e || window.event;
    if (e.button == 2) {
        if (typeof TreeConfig.contextmenu == "function")
            TreeConfig.contextmenu();
        return false;
    }
    return true;
};

TreeNode.prototype.getFirstChild = function() {
    if (this.childNodes.length>0 && this.open)
        return this.childNodes[0];
    return this;
};

TreeNode.prototype.getLastChild = function() {
    if (this.childNodes.length>0 && this.open)
        return this.childNodes[this.childNodes.length-1].getLastChild();
    return this;
};

TreeNode.prototype.getPreviousSibling = function() {
    if (!this.parentNode) return null;
    for (var i=0;i<this.parentNode.childNodes.length;i++)
        if (this.parentNode.childNodes[i] == this) break;
    if (i == 0) 
        return this.parentNode;
    else
        return this.parentNode.childNodes[i-1].getLastChild();
};

TreeNode.prototype.getNextSibling = function() {
    if (!this.parentNode) return null;
    for (var i=0;i<this.parentNode.childNodes.length;i++)
        if (this.parentNode.childNodes[i] == this)break;
    if (i == this.parentNode.childNodes.length-1)
        return this.parentNode.getNextSibling();
    else
        return this.parentNode.childNodes[i+1];
}

TreeNode.prototype.KeyDown=function(e){
    e = e || window.event;
    var code = e.which || e.keyCode;
    var o = this;
    if (code == 37) {
        if (this.open) this.collapse();
        else {
            if (this.parentNode) this.parentNode.select(false);
        }
        return false;
    }
    else if (code == 38) {
        var el = o.getPreviousSibling();
        if (el) el.select(false);
        return false;
    }
    else if (code == 39) {
        if (this.childNodes.length>0) {
            if (!this.open) this.expand();
            else {
                var el = o.getFirstChild();
                if(el) el.select(false);
            }
        }
        return false;
    }
    else if (code == 40) {
        if (this.open && this.childNodes.length>0) this.getFirstChild().select(false);
        else {
            var el = o.getNextSibling();
            if (el) el.select(false);
        }
        return false;
    }
    else if (code == 13) {
        this.toggle();
        return true;
    }
    return true;
};

function CheckBoxTreeNode(sKey, sName, sText, sHref, sTarget, sTitle, sIcon, sOpenIcon, sXMLSrc) {
    this._base = TreeNode;
    this._base(sKey, sText, sHref, sTarget, sTitle, sIcon, sOpenIcon, sXMLSrc);
    this.name = sName;
    this.checked = false;
};

CheckBoxTreeNode.prototype = new TreeNode;

CheckBoxTreeNode.prototype.toHTML = function () {
    this._base = TreeNode.prototype.toHTML;
    this._base();
    var oThis = this;
    this._checkbox = document.createElement("input");
    this._checkbox.id = this._checkbox.name = this.name;
    this._checkbox.type = "checkbox";
    this._checkbox.defaultChecked = this.parentNode instanceof CheckBoxTreeNode ? this.parentNode.getChecked() : this.checked;
    this._checkbox.onclick = function () { oThis.check() };
    this._checkbox.hideFocus = true;
    this._item.insertBefore(this._checkbox, this._icon);
    return this._item;
};

CheckBoxTreeNode.prototype.check = function () {
    this.setCheckedChildren(this.getChecked());
    this.setCheckedParent();
    if (typeof this.oncheck == "function") {
        this.oncheck();
    } else {
        eval(this.oncheck);
    }
};

CheckBoxTreeNode.prototype.setCheckedChildren = function (b) {
    for (var i=0,j=0; i<this.childNodes.length; i++) {
        if (this.childNodes[i] instanceof CheckBoxTreeNode) 
            this.childNodes[i].setCheckedChildren(b);
    } 
    this._checkbox.checked = b;
};

CheckBoxTreeNode.prototype.setCheckedParent = function () {
    var p = this.parentNode;
    if (p instanceof CheckBoxTreeNode) {
        for (var i=0; i<p.childNodes.length; i++) {
            if (!p.childNodes[i].getChecked()) break;
        }
        p._checkbox.checked = i == p.childNodes.length
        p.setCheckedParent();
    }
};

CheckBoxTreeNode.prototype.getChecked = function () {
    return this._checkbox.checked;
};

//************
// TreeView
//************
function TreeView(sKey, sText, sHref, sTarget, sTitle, sIcon, sOpenIcon, sXMLSrc) {
    this.base = TreeNode;
    this.base(sKey, sText, sHref, sTarget, sTitle, sIcon, sOpenIcon, sXMLSrc);
    this.icon = sIcon || TreeConfig.TreeIcon.root;
    this.context = new Array();
    this._rendered = false;
    this._tree = this;
};

TreeView.prototype = new TreeNode;

TreeView.prototype.getSelectedNode = function () {
    if (window.selectedNode) return window.selectedNode;
    return null;
};

TreeView.prototype.setSelectedNode = function (oNode) {
    window.selectedNode = oNode;
};

TreeView.prototype.setContext = function () {
    this.context = new Array();
    for (var i=arguments.length-1,j=0; i>=0; i--,j++) {
        this.context[j] = arguments[i];
    }
};

TreeView.prototype.create = function (oTarget) {
    oTarget.appendChild(this.toHTML());
    this._rendered = true;
    if (this.childNodes.length>0 || this.open || this.src) 
        this.expand();
};

TreeView.prototype.toString = function () {
    var obj = this.toHTML();
    var o = document.createElement("div");
    o.appendChild(obj);
    this._rendered = true;
    return o.innerHTML;
};

Javascript 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
vue给组件传递不同的值方法
Sep 29 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
Vue中的transition封装组件的实现方法
Aug 13 Javascript
xtree.js 代码
Mar 13 #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
You might like
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
小议javascript 设计模式 推荐
2009/10/28 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
2018/03/10 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
Python数据类型学习笔记
2016/01/13 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
使用python调用zxing库生成二维码图片详解
2017/01/10 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
Python numpy数组转置与轴变换
2019/11/15 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
岗位职责的定义
2013/11/10 职场文书
学年自我鉴定
2014/01/16 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
物流专业求职信
2014/06/30 职场文书
职工小家建设活动方案
2014/08/25 职场文书
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS