23-2 tree.js

JAVASCRIPT完全自学手册,中源码的验证修订实例

// global static definition
IMG_EMPTY="../inc/js_tree_img/empty.gif";
IMG_FOLDER="../inc/js_tree_img/folder.gif";
IMG_FOLDER_OPEN="../inc/js_tree_img/folderopen.gif";
IMG_JOIN ="../inc/js_tree_img/join.gif";
IMG_JOIN_BOTTOM ="../inc/js_tree_img/joinbottom.gif";
IMG_LINE ="../inc/js_tree_img/line.gif";
IMG_MINUS ="../inc/js_tree_img/minus.gif";
IMG_MINUS_BOTTOM ="../inc/js_tree_img/minusbottom.gif";
IMG_PAGE ="../inc/js_tree_img/page.gif";
IMG_PLUS ="../inc/js_tree_img/plus.gif";
IMG_PLUS_BOTTOM ="../inc/js_tree_img/plusbottom.gif";

//LINE_ICON_DIM=18;

BLANK_TIP={ uid:"", name:"anonymous", collapsed:true, hasChild:false, childURL:"", childId:"", caption:"<div class=\"tree_error_tip\">暂无内容<\/div>", icon:"" }
ERROR_TIP={ uid:"", name:"anonymous", collapsed:true, hasChild:false, childURL:"", childId:"", caption:"<div class=\"tree_error_tip\">出错了<\/div>", icon:"" }
LOADING_TIP={ uid:"", name:"anonymous", collapsed:true, hasChild:false, childURL:"", childId:"", caption:"<div class=\"tree_loading_tip\">载入中，请稍候...<\/div>", icon:"" }

// create a global variable to be a multi-thread communicator with the server.
var tree_xmlhttp=new multiThreads_xmlhttp();

// use this function to create a tree.
// if you want to bound the tree to an exists HTML element (a div is recommended), set the boundID
function tree_create(boundID){
    var re;
    
    if(boundID)re=document.getElementById(boundID);
    
    if(!re)re=document.createElement("div");
    
    if(!re.id)re.id=uid();
    
    re.className="tree_root";
    re.depth=0;
    re.indentLinesNo=new Array();
    re.isRoot=true;
    re.items=new Array();
    re.root=re;
    
    re.appendJSNode=tree_appendJSNode;
    re.load=tree_load;
    
    return(re);
} 


function tree_addLine(depth){
    this.sub.indentLinesNo[depth]=true;
    for(var i=0; i<this.sub.childNodes.length; i++){
        this.sub.childNodes[i].indents[depth].style.background="url("+IMG_LINE+")";
        this.sub.childNodes[i].addLine(depth);
    }
}

// this method applied on the tree_node container
function tree_appendJSNode(jsNode){
    var nd, nd_sub;
    
    // create the html node
    nd=document.createElement("div");
    this.appendChild(nd);
    
    nd.className="tree_node";
    nd.collapsed=true;
    nd.depth=this.depth;
    nd.has_child=jsNode.hasChild;
    nd.id=jsNode.id;
    nd.name=jsNode.name;
    nd.root=this.root;
    
    nd.BR=document.createElement("div");
    nd.BR.className="tree_br";
    if(nd.depth>0)nd.BR.style.marginLeft=window.navigator.appName=="Microsoft Internet Explorer"?"9px":"18px";
    nd.appendChild(nd.BR);
    
    nd.indents=new Array();
    for(var i=1; i<nd.depth; i++){
        nd.indents[i]=document.createElement("div");
        nd.indents[i].className="tree_indent";
        if(this.indentLinesNo[i])nd.indents[i].style.background="url("+IMG_LINE+")";
        nd.appendChild(nd.indents[i]);
    }
    
    nd.icon=document.createElement("img"); // this image is the line icon
    nd.icon.className="tree_caption_line_icon";
    nd.appendChild(nd.icon);
    
    nd.caption=document.createElement("div");
    nd.caption.className="tree_caption";
    nd.appendChild(nd.caption);
    
    nd.caption.icon=document.createElement("img"); // this image is the icon
    nd.caption.icon.className="tree_caption_icon";
    nd.caption.appendChild(nd.caption.icon);
    
    nd.caption.txt=document.createElement("span"); // this div is the caption text
    nd.caption.txt.className="tree_caption_text";
    nd.caption.appendChild(nd.caption.txt);
    
    if(nd.has_child){
        nd.sub=document.createElement("div"); 
        nd.sub.className="tree_sub";
        nd.appendChild(nd.sub);
        
        nd.sub.depth=nd.depth+1;
        nd.sub.indentLinesNo=new Array();
        for(var i in this.indentLinesNo)nd.sub.indentLinesNo[i]=this.indentLinesNo[i];
        nd.sub.isRoot=false; 
        nd.sub.items=new Array();
        nd.sub.root=nd.root; 
        nd.sub.src=jsNode.childURL;
        nd.sub.data= jsNode.childId;
        
        nd.sub.load=tree_load;
        nd.sub.appendJSNode=tree_appendJSNode;
        
    }
    
    // set html attributes
    if(nd.depth>0)if(nd.previousSibling){
        nd.previousSibling.icon.src=nd.previousSibling.has_child?(nd.previousSibling.collapsed?IMG_PLUS:IMG_MINUS):IMG_JOIN;
        nd.previousSibling.addLine(nd.depth);
    }

    nd.icon.src=nd.depth>0?(nd.has_child?(nd.collapsed?IMG_PLUS_BOTTOM:IMG_MINUS_BOTTOM):IMG_JOIN_BOTTOM):IMG_EMPTY;

    if(jsNode.icon){
        nd.caption.icon.src=jsNode.icon; 
        nd.caption.icon.customized=true;
    }else{
        nd.caption.icon.src=nd.has_child?(nd.collapsed?IMG_FOLDER:IMG_FOLDER_OPEN):IMG_PAGE;
    }
    
    nd.caption.txt.innerHTML=jsNode.caption;
    
    // set events
    nd.caption.onclick=tree_caption_onclick;
    nd.caption.ondblclick=tree_caption_ondblclick;
    nd.caption.onmouseover=tree_caption_onmouseover;
    nd.caption.onmouseout=tree_caption_onmouseout;
    
    nd.icon.onclick=tree_icon_onclick;
    
    // set methods
    nd.addLine=tree_addLine;
    nd.collapse=tree_collapse;
    nd.select=tree_caption_select;
    nd.getPath=tree_getPath;
    
    // expand the node if required
    if(!jsNode.collapsed)nd.collapse(false);
} 


function tree_caption_onclick(){
    
    this.parentNode.collapse();
    
    if(this.parentNode.selected)return;
    if(this.parentNode.root.selectedTreeNode)if(!this.parentNode.root.selectedTreeNode.selected)this.parentNode.root.selectedTreeNode.caption.className="tree_caption";
    this.className="tree_caption_active";
    this.parentNode.root.selectedTreeNode=this.parentNode;
    
} 

function tree_caption_ondblclick(){
    
}

function tree_caption_onmouseover(){
    if(this.parentNode.selected)return;
    if(this.parentNode.root.selectedTreeNode==this.parentNode)return;
    this.className="tree_caption_hover";
}
 
function tree_caption_onmouseout(){ 
    if(this.parentNode.selected)return;
    if(this.parentNode.root.selectedTreeNode==this.parentNode)return;
    this.className="tree_caption";
}

function tree_caption_select(bln){
    if(bln){
        this.caption.className="tree_caption_selected";
        this.selected=true;
    }else{
        this.caption.className="tree_caption";
        this.selected=false;
    }
}

function tree_collapse(bln){
    if(!this.has_child)return; 
    if(bln==undefined)bln=!this.collapsed;
    if(this.collapsed==bln)return;
    if(bln){
        if(this.depth>0)this.icon.src=this.nextSibling?IMG_PLUS:IMG_PLUS_BOTTOM;
        if(!this.caption.icon.customized)this.caption.icon.src=IMG_FOLDER;
        this.sub.style.display="none";
    }else{
        if(this.depth>0)this.icon.src=this.nextSibling?IMG_MINUS:IMG_MINUS_BOTTOM;
        if(!this.caption.icon.customized)this.caption.icon.src=IMG_FOLDER_OPEN;
        if(!this.sub.loaded)this.sub.load();
        this.sub.style.display="block";
    } 
    this.collapsed=bln;
}

function tree_getPath(){
    var re=this.name;
    if(!this.parentNode.isRoot)re=this.parentNode.parentNode.getPath()+"/"+re;
    return(re);
}

function tree_icon_onclick(){
    this.parentNode.collapse();
}

function tree_load(url,data){
    if(url)this.src=url;
    if(data)this.data=data;
    this.appendJSNode(LOADING_TIP);
    this.src=this.src?this.src:"";
    this.data=this.data?this.data:"";
    tree_xmlhttp.tasks.push("POST",this.src,true,{"Content-Type":"application/x-www-form-urlencoded","Content-Length":this.data.length},this.data,0,tree_onload,tree_onerr);
    tree_xmlhttp.tasks[tree_xmlhttp.tasks.length-1].tree_node=this;
    tree_xmlhttp.start();
}

function tree_onload(){
    var t_nodes;
    try{
        t_nodes=eval(this.responseText);
        this.boundTask.tree_node.innerHTML="";
        if(t_nodes.length>0){
            for(var i=0; i<t_nodes.length; i++){ this.boundTask.tree_node.appendJSNode(t_nodes[i]); }
        }else{
            this.boundTask.tree_node.appendJSNode(BLANK_TIP);
        }
        this.boundTask.tree_node.loaded=true;
    }catch(e){ tree_onerr(e); }
} 

function tree_onerr(e){
    var o;
    this.boundTask.tree_node.innerHTML="";
    this.boundTask.tree_node.appendJSNode(ERROR_TIP);
    o=this.boundTask.tree_node.childNodes[this.boundTask.tree_node.childNodes.length-1];
    if(e){ o.caption.txt.innerHTML=e.description; }
    o.caption.txt.innerHTML+="#"+this.status;
    if(this.status==404)o.caption.txt.innerHTML+="#"+"404找不到数据源";
    //throw(e);
}


function uid(){
    return("u"+(new Date()).getTime().toString(35)+parseInt(Math.random()*999999).toString(35));
}