> 웹 프론트엔드 > JS 튜토리얼 > newxtree.js code_javascript 기술

newxtree.js code_javascript 기술

WBOY
풀어 주다: 2016-05-16 19:16:31
원래의
978명이 탐색했습니다.

/*================================================
        Powered 작성자: Fason
        이메일: fason_pfx@hotmail.com
        홈페이지:http://fason.nease.net
        버전: 3.0
=============== ==========================*/

var TreeConfig = {
    TreeIcon            :{
        루트                :' root.gif',
        folderopen            :'folderopen.gif',
        폴더               :'folder.gif',
        파일                :'file.gif',
        Rplus                :'Rplus.gif',
        Rminus                :'Rminus.gif',
        join              :'T.gif',
        joinbottom            :'L.gif',
        플러스               :'Tplus.gif',
        plusbottom            :'Lplus .gif',
        마이너스               :'Tminus.gif',
        minusbottom           :'Lminus.gif',
        공백               :'blank.gif ',
        라인                :'I.gif'
},
    defaultText            :"새로 만들기",
    defaultHref            :"javascript:void(0)",
    defaultTarget        :"_blank",
    loadingText            :"로드 중...",
    unavaibleText :"사용할 수 없음",
    useCookie            :true,
    contextmenu            :null
};

var TreeHandler = {
    id                 :0,
    all                 :{},
    getId               :function (obj, 키) {
        var ID = 키 == null ? this.id:키;
        this.all[ID] = obj;
        return 키==null ? this.id  : 키;
    },
    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 = 새 함수 () {

    this.setValue = 함수 (sName, sValue, sExpire, sPath, sDomain, sSecure) {
        var cookie = sName   "="   escape(sValue);
        if (sExpire) 쿠키  = "; expires="   sExpire.toGMTString();
        if (sPath) 쿠키  = "; path="   sPath;
        (sSecure) 쿠키인 경우  = "; secure";
        document.cookie = 쿠키;
    };

    this.getValue = 함수(sName) {
        var c = document.cookie.split("; ");
        for (var i=0; i            var cItem = c[i].split("=");
            if (cItem[0] == sName) return unescape(cItem[1]);
        }
        null을 반환합니다.
    };

    this.delCookie = 함수(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));
    이것을 반환하세요.
};

함수 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 ? 제목 : 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 ? "" : "없음";
    this._item.appendChild(this._container);
};

TreeNode.prototype.HTMLtoText = 함수 {
    return String(s).replace(/&/g, "&").replace(/"/g, '"'). 교체(/,'/g, '>');
};

TreeNode.prototype.isLast = function () {
    var p = this.parentNode;
    if (p == null) false를 반환합니다.
    return p.childNodes[p.childNodes.length - 1] == 이;
};

TreeNode.prototype.indent = function () {
    for (var i=0; i    var t = this._item, iv = this.level;
    if (iv) 동안(--iv) { t.removeChild(t.firstChild); }
    var node = this.parentNode, v = 0, _root = this.getRoot();
    while (노드) {
        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.parentNode;
    }
    this.level = v;
};

TreeNode.prototype.recalIndent = function (nLevel, b) {
    for (var i = 0; i       this.childNodes[i]. _item.childNodes[n레벨-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 = 함수(doc) {
    var c = doc.childNodes;
    for (var i = 0; i         var o = c[i];
        if (o.nodeType == 1) {
            var X = this.constructor;
           var 노드 = 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(노드);
            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;
    시도해 보세요{
        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('귀하의 브라우저는 지원하지 않습니다!');
    this._xmlhttp.onreadystatechange = 함수 () { oThis.XMLHttpCallBack(); };
    시도해 보세요 {
        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 = 함수(oTree) {
    for (var i=0; i        this.childNodes[i].resetTree(oTree );
    this._tree = oTree;
};

TreeNode.prototype.setOpen = 함수(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);
    0을 반환합니다.
};

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

TreeNode.prototype.getRoot = function() {
    var root = this;
    while (root.parentNode) root = root.parentNode;
    루트를 반환합니다.
};    

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 = 이;
    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 (트리) {
        if (tree._rendered) this.open = 0;
        this.reloadIcon();
    }
    if (트리) this.resetTree(트리);
    this._container.style.display = this.open ? "" : "없음";
    this._container.appendChild(oItem.toHTML());
    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 = "없음";
            p.reloadIcon();
        }
    }
    var tmp = this._item;
    if (tmp) tmp.parentNode.removeChild(tmp);
    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 = "없음";
    this.reloadIcon();
    this.select(false);
    if (typeof this.oncollapse == "function") {
        this.oncollapse();
    } else {
        eval(this.oncollapse);
    }
};

TreeNode.prototype.async = 함수() {
    var a = this._tree.context;
    if (!a.length) 반환;
    var id = a[a.length - 1];
    var node = TreeHandler.all[id];
    if (typeof(node) != '정의되지 않음') {
        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 선택됨 = this._tree.getSelectedNode();
    if (선택됨 == this) this._tree.setSelectedNode(null);
};

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

TreeNode.prototype.blur = function () {
    var oItem = this._anchor;
    oItem.className =  "TreeNode-Anchor가 선택됨";
};

TreeNode.prototype.contextMenu = 기능 (e) {
    e = e || 창.이벤트;
    if (e.button == 2) { ​​
        if (typeof TreeConfig.contextmenu == "function")
            TreeConfig.contextmenu();
        false를 반환합니다.
    }
    true를 반환합니다.
};

TreeNode.prototype.getFirstChild = function() {
    if (this.childNodes.length>0 && this.open)
        return this.childNodes[0];
    이것을 반환하세요.
};

TreeNode.prototype.getLastChild = function() {
    if (this.childNodes.length>0 && this.open)
        this.childNodes[this.childNodes.length-1]을 반환합니다. getLastChild();
    이것을 반환하세요.
};

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 || 창.이벤트;
    var code = e.which || e.키코드;
    var o = 이;
    if (코드 == 37) {
        if (this.open) this.collapse();
        else {
            if (this.parentNode) this.parentNode.select(false);
        }
        false를 반환합니다.
    }
    else if (코드 == 38) {
        var el = o.getPreviousSibling();
        if (el) el.select(false);
        false를 반환합니다.
    }
    else if (코드 == 39) {
        if (this.childNodes.length>0) {
            if (!this.open) this.expand();
            else {
                var el = o.getFirstChild();
                if(el) el.select(false);
            }
        }
        false를 반환;
    }
    else if (코드 == 40) {
        if (this.open && this.childNodes.length>0) this.getFirstChild().select(false);
        else {
            var el = o.getNextSibling();
            if (el) el.select(false);
        }
        false를 반환합니다.
    }
    else if (코드 == 13) {
        this.toggle();
        true를 반환합니다.
    }
    true를 반환합니다.
};


함수 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 = 새 TreeNode;

CheckBoxTreeNode.prototype.toHTML = 함수() {
    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 = "체크박스";
    this._checkbox.defaultChecked = this.parentNode CheckBoxTreeNode의 인스턴스 ? this.parentNode.getChecked() : this.checked;
    this._checkbox.onclick = 함수 () { 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] CheckBoxTreeNode의 인스턴스) 
            this.childNodes[i].setCheckedChildren(b);
    } 
    this._checkbox.checked = b;
};

CheckBoxTreeNode.prototype.setCheckedParent = 함수 () {
    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 = 함수 () {
    return this._checkbox.checked;
};


//************
// TreeView
//************
기능 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 = 이것;
};

TreeView.prototype = 새 TreeNode;

TreeView.prototype.getSelectedNode = function () {
    if (window.selectedNode) return window.selectedNode;
    null을 반환합니다.
};

TreeView.prototype.setSelectedNode = 함수(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 = 함수(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;
    o.innerHTML을 반환합니다.
};



관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿