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 相关文章推荐
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
javascript中定义私有方法说明(private method)
Jan 27 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
Vue.js基础知识小结
Jan 13 Javascript
js上下视差滚动简单实现代码
Mar 07 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
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
php array_intersect()函数使用代码
2009/01/14 PHP
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
php内存缓存实现方法
2015/01/24 PHP
php实现的农历算法实例
2015/08/11 PHP
php的常量和变量实例详解
2017/06/27 PHP
ajax 缓存 问题 requestheader
2010/08/01 Javascript
Jquery实现简单的动画效果代码
2012/03/18 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
python操作ie登陆土豆网的方法
2015/05/09 Python
Python实现股市信息下载的方法
2015/06/15 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
django中使用POST方法获取POST数据
2019/08/20 Python
python清空命令行方式
2020/01/13 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
中科前程Java笔试题
2016/11/20 面试题
美容院经理岗位职责
2014/04/03 职场文书
高一学生期末评语
2014/04/25 职场文书
出国签证在职证明范本
2014/11/24 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
Django 实现jwt认证的示例
2021/04/30 Python
redis 查看所有的key方式
2021/05/07 Redis