Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > newxtree.js code_javascript skills

newxtree.js code_javascript skills

WBOY
Release： 2016-05-16 19:16:31
Original
978 people have browsed it

/*=========================================
        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            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        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, '>');
};

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    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[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         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(//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[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.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[i].expandAll();
};

TreeNode.prototype.collapseChildren = function() {
    for (var i=0; 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        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        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        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            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;
};



Related labels：
newxtree.js代码
source：php.cn
Previous article：Full-screen advertising code and usage instructions obtained from Sina_Advertising Code Next article：Beautiful prompt message (with arrow)_link special effects
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
What is the format of the variables in the return value? I am a new learner of php. I found a piece of code: if($x<time()){return[false,'error']...
From 2024-04-06 21:55:20
0
1
778
Sudoku checker not working? Can anyone help me identify the error? I tried everything on the online editor but still get the error. But when I do this on VSC...
From 2024-04-06 21:21:07
0
1
474
How to make floated elements stack vertically instead of horizontally in CSS? I'm trying to make a webpage with two columns, with main content on one side and additiona...
From 2024-04-06 20:45:26
0
2
386
Is there a way to force the text in the flexbox to be vertically centered, no matter what other CSS code we have? I have the following CSS code that is part of a larger CSS code used in a website I'm deve...
From 2024-04-06 20:41:51
0
1
518
How to solve the mysterious white space at the bottom of the page in CSS I'm trying to build a simple webpage using Bootstrap and D3, but I don't know how to get r...
From 2024-04-06 20:22:15
0
1
454
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template