一個很實用和好用的資源管理器的樹形目錄源碼

    本原碼從網上下載，經本人改寫，功能更強大，使用更方便，可以有無限級目錄，一次性載入，可以分別設置樹結點和葉結點的顏色及圖標，可以展開和收縮，可以顯示當前所處的路徑位置，點擊樹結點時只在展開時顯示樹結點的超鏈接，不過，據測試，一次性載入500個節點時瀏覽器會顯示“該腳本會使瀏覽器變慢”的提示，不過，選擇不取消執行不會影響瀏覽器的性能。
function Folder(folderDescription, hreference,parentid,target) {
   //constant data;

   this.desc = folderDescription;
   this.parentid=parentid;
   this.hreference = hreference;
   this.target=target;
   this.id = index;
   this.navObj = 0;
   this.iconImg = 0;
   this.nodeImg = 0;
   this.isLastNode = 0;

   // dynamic data
   this.isRoot = true;
   this.isOpen = true;
   this.iconsrc="/Files/BeyondPic/2005-12/19/05121906564426578.gif"";
   this.iconRoot =imageURL+"ftv2folderopen.gif";

   this.children = new Array;
   this.nChildren = 0;

   // methods
   this.initialize = initializeFolder;
   this.setState = setStateFolder;
   this.addChild = addChild;

   this.createIndex = createEntryIndex;
   this.hide = hideFolder;
   this.display = display;
   this.renderOb = drawFolder;
   this.totalHeight = totalHeight;
   this.subEntries = folderSubEntries;
   this.outputLink = outputFolderLink;

}


function setStateFolder(isOpen) {
   var subEntries;
   var totalHeight;
   var fIt = 0;
   var i = 0;

   if(isOpen == this.isOpen)
       return;

   if(browserVersion == 2) {
       totalHeight = 0
       for(i = 0; i < this.nChildren; i++)
           totalHeight = totalHeight + this.children[i].navObj.clip.height;
       subEntries = this.subEntries();

       if(this.isOpen)
           totalHeight = 0 - totalHeight;

       for(fIt = this.id + subEntries + 1; fIt < nEntries; fIt++)
           indexOfEntries[fIt].navObj.moveBy(0, totalHeight);
   }

   this.isOpen = isOpen;
   propagateChangesInState(this);
}


function propagateChangesInState(folder) {

   var i = 0;
   if(folder.isOpen) {
       if(folder.nodeImg) {
           if(folder.isLastNode)
               folder.nodeImg.src = imageURL+"ftv2mlastnode.gif";
           else
               folder.nodeImg.src = imageURL+"ftv2mnode.gif";
       }

       if(this.isRoot)
           folder.iconImg.src = imageURL+"ftv2_mail.gif";
       else
           folder.iconImg.src = imageURL+"ftv2folderopen.gif";

       for(i = 0; i < folder.nChildren; i++)
           folder.children[i].display();
   }
   else {
       if(folder.nodeImg) {
           if(folder.isLastNode)

               folder.nodeImg.src = imageURL+"ftv2plastnode.gif";
           else
               folder.nodeImg.src = imageURL+"ftv2pnode.gif";
       }

       if(this.isRoot)
           folder.iconImg.src = imageURL+"ftv2_mail.gif";
       else
           folder.iconImg.src = imageURL+"ftv2folderclosed.gif";

       for(i = 0; i < folder.nChildren; i++)
           folder.children[i].hide();
   }
}

function hideFolder() {
    if(browserVersion == 1) {
        if(this.navObj.style.display == "none")
            return;

        this.navObj.style.display = "none";
    }
    else {
        if(this.navObj.visibility == "hiden")
            return;

        this.navObj.visibility = "hiden";
    }

    this.setState(0);
}


function initializeFolder(level, lastNode, leftSide) {
    var i = 0;
    var j = 0;

    var numberOfFolders;
    var numberOfDocs;

    nc = this.nChildren;
    this.createIndex();

    var nc;
    var auxEv = "";

    if(browserVersion > 0)
        auxEv = "<A HREF='JavaScript: clickOnNode("+this.id+")'>";
    else
        auxEv = "<A>";

    if(level > 0) {
        if(lastNode) { //the last 'brother' in the children array
           this.renderOb(leftSide + auxEv + "<IMG NAME='nodeIcon" + this.id + "' src="/Files/BeyondPic/2005-12/19/05121906564762713.gif" WIDTH=16 HEIGHT=22 BORDER=0></A>");
           leftSide = leftSide + "<IMG src="/Files/BeyondPic/2005-12/19/05121906565077649.gif"\' WIDTH=16 HEIGHT=22>";
           this.isLastNode = 1;
        }
        else {
            this.renderOb(leftSide + auxEv + "<IMG NAME='nodeIcon" + this.id + "'src="/Files/BeyondPic/2005-12/19/05121906565471284.gif"\' WIDTH=16 HEIGHT=22 BORDER=0></A>");
            leftSide = leftSide + "<IMG src="/Files/BeyondPic/2005-12/19/05121906565752587.gif"\' WIDTH=16 HEIGHT=22>";
            this.isLastNode = 0;
        }
    }
    else {
        this.renderOb("");
    }

    if(nc > 0) {
        level = level + 1;
        for(i = 0; i < this.nChildren; i++) {
            if(i == this.nChildren-1)
                this.children[i].initialize(level, 1, leftSide);
            else
                this.children[i].initialize(level, 0, leftSide);
        }
    }
}


function drawFolder(leftSide) {
    if(browserVersion == 2) {
        if(!doc.yPos)
          doc.yPos = 8;

        doc.write("<LAYER ID='folder" + this.id + "' TOP=" + doc.yPos + " VISIBILITY=hiden>");
    }
    doc.write("<TABLE")

    if(browserVersion == 1)
        doc.write(" ID='folder" + this.id + "' STYLE='position:block;' ");

    doc.write(" BORDER=0 CELLSPACING=0 CELLPADDING=0>");
    doc.write("<TR><TD>");
    doc.write(leftSide);

    this.outputLink();

    doc.write("<IMG NAME='folderIcon" + this.id + "' ");
    if(leftSide == '') {
        doc.write("SRC='" + this.iconRoot+"' BORDER=0></A>");
    }
    else {
        doc.write("SRC='" + this.iconSrc+"' BORDER=0></A>");
    }

    doc.write("</TD><TD NOWRAP>");

    doc.write("<DIV CLASS=\"fldrroot\">");

    if(leftSide == '') {
       if(USETEXTLINKS) {
          this.outputLink();
          doc.write('<font size="2" color="'+floderColor+'">'+this.desc + "</font></A>");
       }
       else
         doc.write(this.desc);
    }
    else {
        doc.write("<A  HREF='JavaScript: clickOnNode("+this.id+")'>");
        doc.write('<font size="2" color="'+floderColor+'">'+this.desc + "</font></A>");
    }

    doc.write("</DIV>");
    doc.write("</TD>");
    doc.write("</TABLE>");

    if(browserVersion == 2) {
        doc.write("</LAYER>");
    }

    if(browserVersion == 1) {
        this.navObj = doc.all["folder"+this.id];
        this.iconImg = doc.all["folderIcon"+this.id]
        this.nodeImg = doc.all["nodeIcon"+this.id]
    }
    else if(browserVersion == 2) {
        this.navObj = doc.layers["folder"+this.id];
        this.iconImg = this.navObj.document.images["folderIcon"+this.id];
        this.nodeImg = this.navObj.document.images["nodeIcon"+this.id];
        doc.yPos = doc.yPos + this.navObj.clip.height;
    }
}
<BODY bgColor=#C0C693 leftMargin=5 topMargin=5 marginwidth="5" marginheight="5">
<SCRIPT language=JavaScript src="../leftfiles/treemenu.js"></SCRIPT>
<SCRIPT language=JavaScript>
    //以下三項可以設置也可以按默認值，main和parent.main都是鏈接頁面要顯示的目標框架
    setImageURL("images/"); //圖標路徑
    setLinkColor("#ff0000");//葉節點鏈接顏色
    setFloderColor("#ffff00");//樹結點鏈接顏色
    
    
    foldersTree = gFldr('***介紹','','');
           aux1 = insFldr(foldersTree, "**機關",parent.main,"function.htm");
                aux2 = insFldr(aux1 , "**處",parent.main,"function.htm");
                    insDoc(aux2 , "main", "**室","department/manage/offic.htm");
                    insDoc(aux2 , "main", "**室", "department/manage/employee.htm");                
                    insDoc(aux2 , "main", "**室","department/manage/finance.htm");
                
                aux2 = insFldr(aux1 , "**處",parent.main,"function.htm");
                
                     insDoc(aux2 , "main", "**室","department/manage/law.htm");
                     insDoc(aux2 , "main", "**室","department/manage/manage.htm");
                     insDoc(aux2 , "main", "**室", "department/manage/custody.htm");
                     insDoc(aux2 , "main", "**室", "department/manage/marketmanage.htm");
                
                    aux3 = insFldr(aux2 , "**處",parent.main,"function.htm");

                        insDoc(aux3 , "main", "**室", "department/manage/policy.htm");
                        insDoc(aux3 , "main", "**室", "department/manage/disposition.htm");
                    
        aux1 = insFldr( foldersTree,"**中心",parent.main,"department/business/function.htm");
              aux2 = insFldr(aux1 , "**處",parent.main,"function.htm");
                    insDoc(aux2 , "main", "**室","department/manage/offic.htm");
                    insDoc(aux2 , "main", "**室", "department/manage/employee.htm");                
                    insDoc(aux2 , "main", "**室","department/manage/finance.htm");
                
              aux2 = insFldr(aux1 , "**處",parent.main,"function.htm");
                
                     insDoc(aux2 , "main", "**室","department/manage/law.htm");
                     insDoc(aux2 , "main", "**室","department/manage/manage.htm");
                     insDoc(aux2 , "main", "**室", "department/manage/custody.htm");
                     insDoc(aux2 , "main", "**室", "department/manage/marketmanage.htm");
                
                    aux3 = insFldr(aux2 , "**處",parent.main,"function.htm");

                        insDoc(aux3 , "main", "**室", "department/manage/policy.htm");
                        insDoc(aux3 , "main", "**室", "department/manage/disposition.htm");

                       
    initializeDocument();

</script>
function outputFolderLink() {
    if(this.hreference && this.target) {
        doc.write("<A HREF='" + this.hreference + "' TARGET=\""+this.target.name+"\" ")

        if(browserVersion > 0) {
            doc.write("onClick='JavaScript: clickOnFolder("+this.id+")'")
        }
        doc.write(">")
    }
    else
        doc.write("<A>")
}


function addChild(childNode) {
       selectfile[fEntries]=childNode.desc;
       fEntries++;
       this.children[this.nChildren] = childNode;
       this.nChildren++;
       return(childNode);
}


function folderSubEntries() {
    var i = 0;
    var se = this.nChildren;

    for(i = 0; i < this.nChildren; i++) {
        if(this.children[i].children) //is a folder
            se = se + this.children[i].subEntries();
    }

    return(se)
}


// Definition of class Item (a document or link inside a Folder)

function Item(itemDescription, hreference, itemLink, itemImg,parentid) // Constructor
{
    // constant data
    this.desc = itemDescription
    this.link = itemLink
    this.hreference = hreference;
    this.id =index;
    this.navObj = 0;  //initialized in render()
    this.iconImg = 0; //initialized in render()

    // iconSrc俊 瘤瀝登綽 撈固瘤 頗老闌 阿 酒撈袍俊 嘎霸 瘤瀝且 薦 樂檔廢 茄促 (格釬)
    this.iconSrc = itemImg;

    // methods
    this.initialize = initializeItem ;
    this.createIndex = createEntryIndex;
    this.hide = hideItem;
    this.display = display;
    this.renderOb = drawItem;
    this.totalHeight = totalHeight;

    this.parentid=parentid;
    //alert(this.parent);
}


function hideItem() {
    if(browserVersion == 1) {
        if(this.navObj.style.display == "none")
            return;
        this.navObj.style.display = "none"
    }
    else {
        if(this.navObj.visibility == "hiden")
            return;
        this.navObj.visibility = "hiden";
    }
}


function initializeItem(level, lastNode, leftSide) {
    this.createIndex();

    if(level > 0) {
        if(lastNode) { //the last 'brother' in the children array
            this.renderOb(leftSide + "<IMG src="/Files/BeyondPic/2005-12/19/05121906570126337.gif" WIDTH=16 HEIGHT=22>")
            leftSide = leftSide + "<IMG src="/Files/BeyondPic/2005-12/19/05121906570428126.gif" WIDTH=16 HEIGHT=22>"
        }
        else {
            this.renderOb(leftSide + "<IMG src="/Files/BeyondPic/2005-12/19/051219065708665.gif" WIDTH=16 HEIGHT=22>")
            leftSide = leftSide + "<IMG src="/Files/BeyondPic/2005-12/19/05121906571221960.gif" WIDTH=16 HEIGHT=22>"
        }
    }
    else
        this.renderOb("")
}


function drawItem(leftSide) {

    if(browserVersion == 2)
        doc.write("<LAYER ID='item" + this.id + "' TOP=" + doc.yPos + " VISIBILITY=hiden>");

    doc.write("<TABLE ");
    if(browserVersion == 1)
        doc.write(" ID='item" + this.id + "' STYLE='position:block;' ");
    doc.write(" BORDER=0 CELLSPACING=0 CELLPADDING=0>");
    doc.write("<TR><TD>");
    doc.write(leftSide);

    if(this.link != "") doc.write("<A  onclik=\'veiwFile("+this.id+")\'  HREF=" + this.link + ">");
    doc.write("<IMG ID='itemIcon"+this.id+"' ")
    doc.write("SRC='"+this.iconSrc+"' BORDER=0>")

    if(this.link != "")
        doc.write("</A>");

    doc.write("</TD><TD NOWRAP>");
    doc.write("<DIV CLASS=\"fldritem\">");
    if(USETEXTLINKS) {
        if(this.link != "")
               doc.write("<A  onclick=\'veiwFile("+this.id+")\' HREF=" + this.link + '><font size="2" color="'+linkColor+'">'+ this.desc + "</font></A>");
        else
            doc.write(this.desc);
    }
    else {
        doc.write(this.desc);
    }

    doc.write("</DIV>");
    doc.write("</TABLE>")

    if(browserVersion == 2)
        doc.write("</layer>");

    if(browserVersion == 1) {
        this.navObj = doc.all["item"+this.id]
        this.iconImg = doc.all["itemIcon"+this.id]
    }
    else if(browserVersion == 2) {
        this.navObj = doc.layers["item"+this.id];
        this.iconImg = this.navObj.document.images["itemIcon"+this.id];
        doc.yPos = doc.yPos+this.navObj.clip.height;
    }
}

function addposition(id,str1){
    if(id>0){
       clickedFolder = indexOfEntries[id];
       parentid=clickedFolder.parentid;
       parentname=indexOfEntries[parentid];
       pa=parentname.desc;
       if(parentid==0)str=pa+str1;
       else str='</font><font size=\"2\" color=\"#8F8F8F\">—></font><font size=\"2\" color="#AA0000">'+pa+str1;
       addposition(parentid,str);

    }
}
var str="";
function veiwFile (msg) {
    var typeLogo=typeof top.logo;
    if(typeLogo=="undefined")return;
    var tpyeFrame=typeof  top.logo.top1;
    if(tpyeFrame=="undefined")return;
    objDocument= top.logo.top1;
    var folderText="";
    if(msg==0)folderText=selectfile[msg];
    else {
         str='</font><font size=\"2\" color=\"#8F8F8F\">—></font></font><font size=\"2\" color="#AA0000">'+selectfile[msg];
         addposition(msg,str);
         folderText=str;
    }
    objDocument.document.open();
    objDocument.document.write('<font size=\"2\" color=\"#8F8F8F\"> 當前位置：  </font>  <font size=\"2\" color="#AA0000"> '+folderText+"</font>");
    objDocument.document.close();
}

// Methods common to both objects (pseudo-inheritance)
function display() {
    if(browserVersion == 1)
        this.navObj.style.display = "block";
    else
        this.navObj.visibility = "show";
}


function createEntryIndex() {
    indexOfEntries[nEntries] = this;
    nEntries++;
}


// total height of subEntries open
function totalHeight() { //used with browserVersion == 2
    var h = this.navObj.clip.height;
    var i = 0;

    if(this.isOpen) { // is a folder and _is_ open
        for(i = 0 ; i < this.nChildren; i++)
            h = h + this.children[i].totalHeight();
    }
    return h
}


// Events

function clickOnFolder(folderId) {
    var clicked = indexOfEntries[folderId];
    if(!clicked.isOpen)
        clickOnNode(folderId);
    if(clicked.isSelected)
        return;
}


function clickOnNode(folderId) {
    var clickedFolder = 0;
    var state = 0;
    clickedFolder = indexOfEntries[folderId];
    state = clickedFolder.isOpen;
    if (!state){
         if(clickedFolder.target)clickedFolder.target.location=clickedFolder.hreference; //點擊folder時顯示相關鏈接頁面
         veiwFile(folderId);
     }
    clickedFolder.setState(!state); //open<->close
}


function initializeDocument() {
    if(doc.all)
        browserVersion = 1; //IE4
    else if(doc.layers)
        browserVersion = 2; //NS4
    else
        browserVersion = 0; //other

    foldersTree.initialize(0, 1, "");
    //foldersTree.display();

    if(browserVersion > 0) {
        doc.write("<LAYER TOP="+indexOfEntries[nEntries-1].navObj.top+"> </LAYER>");

        // close the whole tree
        clickOnNode(0);

        // open the root folder
        clickOnNode(0);
    }
}


// Auxiliary Functions for Folder-Treee backward compatibility
function gFldr(description, hreference,parentid,target) {
        var des;
        index++;
        if(fEntries==0){
           selectfile[fEntries]=description;
           fEntries++;
        }
        des=description;
    folder = new Folder(des, hreference,parentid,target);
    return(folder);
}


function gLnk(target, description, linkData, itemImg,parentid) {
    fullLink = ""

    if(target == 0 ||target=="") {
        if(linkData != "")
            fullLink = "'"+linkData+"' TARGET=\"_blank\"";//顯示在新開的窗體中
        else
            fullLink = "";
    }
    if(target == 1) {
        if(linkData != "" )
            fullLink = "'"+linkData+"' TARGET=\"_slef\"";//顯示在表單所在的框架或窗體中
        else
            fullLink = "";
    }
    else if(target == 2) {
        if(linkData != "")
            fullLink = "'"+linkData+"' TARGET=\"_parent\""; //顯示在包含表單的框架的父框架中
        else
            fullLink = "";
    }
    else if(target == 3) {
        if(linkData != "")
            fullLink = "'"+linkData+"' TARGET=\"_top\"";//顯示在頂層窗體中
        else
            fullLink = "";
    }

    else {//alert(target);
        if(linkData != "")
            fullLink = "'"+linkData+"' TARGET="+target;//顯示在target窗體中
        else
            fullLink = "";
    }
    index++; //當前節點編號

    linkItem = new Item(description, linkData, fullLink, itemImg,parentid)
    return linkItem
}


function insFldr(parentFolder, childFolder,target,hreference) {
        var child;
        var desc;
        parentid=parentFolder.id;
        child=gFldr(childFolder,hreference,parentid,target);
    return(parentFolder.addChild(child));
}


function insDoc(parentFolder,target, description, linkData, itemImg) {
        var document;
        var itemImg;
        itemImg=imageURL+"bu.gif";
        var desc;
        parentid=parentFolder.id;
        document=gLnk(target, description, linkData, itemImg,parentid);
    parentFolder.addChild(document);
}

function setObjDocument(msg){
if (msg!=null){
   objDocument=msg;
}
}

//設置展開、收縮圖片路徑
function setImageURL(msg){
if (msg==null){
     imageURL="../leftfiles/images/";
}else imageURL=msg;
}

//設置超鏈接文本顏色
function setLinkColor(msg){
   linkColor=msg;
}
function setFloderColor(msg){
   floderColor=msg;
}
// Global variables

USETEXTLINKS = 1;
indexOfEntries = new Array;
nEntries = 0;
index=-1;   //節點編號
doc = document;
browserVersion = 0;
selectedFolder = 0;
selectfile=new Array;
fEntries=0;
var objDocument,imageURL;
var linkColor="#085dde";
var floderColor="#292c08";
var type1=typeof top.logo;

if (type1=="undefined"){
    objDocument=null;
}

if(imageURL==null){
   setImageURL(imageURL);
}

將源代碼和接前代碼中的代碼合并成一個treemenu.js文件，在在頁面中引入即可

原文轉自：http://www.anti-gravitydesign.com