JavaScript实现树形菜单

 随便做了一个例子如下图

   

[html] 
1，用之前需要组织一个这种结构的XML 
2，业务类别和功能在数据库中配置一下就好了   
      比如："学生管理"配置的在数据库中的状态时001 
      那么 他的孩子节点  "添加学生信息" 对应数据库配置应该是001的孩子节点， 
      这个随你怎么配  ，只要能表示是001的孩子节点就可以了、 
      可以配置为001001,001002，001003后面的三位数代表孩子节点的顺序，前面三位代表。 
3，"/student/student.jsp"  功能所对应的JSP也需要在数据库中配置 
4，不同的角色有不同的权限，这个自己想配吧。 
 js代码
[html] 
function Folder(folderDescription, hreference) //constructor  
{  
  //constant data  
  this.desc = folderDescription  
  this.hreference = hreference  
  this.id = -1    
  this.navObj = 0   
  this.iconImg = 0   
  this.nodeImg = 0   
  this.isLastNode = 0  
  
  //dynamic data  
  this.isOpen = true  
  this.iconSrc = "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 = "ftv2mlastnode.gif"  
      else  
      folder.nodeImg.src = "ftv2mnode.gif"  
    folder.iconImg.src = "ftv2folderopen.gif"  
    for (i=0; i<folder.nChildren; i++)  
      folder.children[i].display()  
  }  
  else  
  {  
    if (folder.nodeImg)  
      if (folder.isLastNode)  
        folder.nodeImg.src = "ftv2plastnode.gif"  
      else  
      folder.nodeImg.src = "ftv2pnode.gif"  
    folder.iconImg.src = "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 j=0  
var i=0  
var numberOfFolders  
var numberOfDocs  
var nc  
       
  nc = this.nChildren  
    
  this.createIndex()  
  
  var auxEv = ""  
  
  if (browserVersion > 0)  
    auxEv = "<a href="http://www.php1.cn/">   else  
    auxEv = "<a>"  
  
  if (level>0)  
    if (lastNode) //the last &#39;brother&#39; in the children array  
    {  
      this.renderOb(leftSide + auxEv + "<img name=&#39;nodeIcon" + this.id + "&#39; src=&#39;ftv2mlastnode.gif&#39; width=16 height=22 border=0></a>")  
      leftSide = leftSide + "<img src=&#39;ftv2blank.gif&#39; width=16 height=22>"   
      this.isLastNode = 1  
    }  
    else  
    {  
      this.renderOb(leftSide + auxEv + "<img name=&#39;nodeIcon" + this.id + "&#39; src=&#39;ftv2mnode.gif&#39; width=16 height=22 border=0></a>")  
      leftSide = leftSide + "<img src=&#39;ftv2vertline.gif&#39; 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=&#39;folder" + this.id + "&#39; top=" + doc.yPos + " visibility=hiden>")  
  }  
    
  doc.write("<table ")  
  if (browserVersion == 1)  
    doc.write(" id=&#39;folder" + this.id + "&#39; style=&#39;position:block;&#39; ")  
  doc.write(" border=0 cellspacing=0 cellpadding=0>")  
  doc.write("<tr><td>")  
  doc.write(leftSide)  
  this.outputLink()  
  doc.write("<img name=&#39;folderIcon" + this.id + "&#39; ")  
  doc.write("src=&#39;" + this.iconSrc+"&#39; border=0></a>")  
  doc.write("</td><td valign=middle nowrap>")  
  if (USETEXTLINKS)  
  {  
    this.outputLink()  
    doc.write(this.desc + "</a>")  
  }  
  else  
    doc.write(this.desc)  
  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  
  }  
}  
  
function outputFolderLink()  
{  
  if (this.hreference)  
  {  
    doc.write("<a href="http://www.php1.cn/">     if (browserVersion > 0)  
      doc.write("onClick=&#39;javascript:clickOnFolder("+this.id+")&#39;")  
    doc.write(">")  
  }  
  else  
    doc.write("<a>")  
//  doc.write("<a href="http://www.php1.cn/"> }  
  
function addChild(childNode)  
{  
  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, itemLink) // Constructor  
{  
  // constant data  
  this.desc = itemDescription  
  this.link = itemLink  
  this.id = -1 //initialized in initalize()  
  this.navObj = 0 //initialized in render()  
  this.iconImg = 0 //initialized in render()  
  this.iconSrc = "ftv2doc.gif"  
  
  // methods  
  this.initialize = initializeItem  
  this.createIndex = createEntryIndex  
  this.hide = hideItem  
  this.display = display  
  this.renderOb = drawItem  
  this.totalHeight = totalHeight  
}  
  
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 &#39;brother&#39; in the children array  
    {  
      this.renderOb(leftSide + "<img src=&#39;ftv2lastnode.gif&#39; width=16 height=22>")  
      leftSide = leftSide + "<img src=&#39;ftv2blank.gif&#39; width=16 height=22>"   
    }  
    else  
    {  
      this.renderOb(leftSide + "<img src=&#39;ftv2node.gif&#39; width=16 height=22>")  
      leftSide = leftSide + "<img src=&#39;ftv2vertline.gif&#39; width=16 height=22>"  
    }  
  else  
    this.renderOb("")    
}  
  
function drawItem(leftSide)  
{  
  if (browserVersion == 2)  
    doc.write("<layer id=&#39;item" + this.id + "&#39; top=" + doc.yPos + " visibility=hiden>")  
      
  doc.write("<table ")  
  if (browserVersion == 1)  
    doc.write(" id=&#39;item" + this.id + "&#39; style=&#39;position:block;&#39; ")  
  doc.write(" border=0 cellspacing=0 cellpadding=0>")  
  doc.write("<tr><td>")  
  doc.write(leftSide)  
  doc.write("<a href="http://www.php1.cn/">   doc.write("<img id=&#39;itemIcon"+this.id+"&#39; ")  
  doc.write("src=&#39;"+this.iconSrc+"&#39; border=0>")  
  doc.write("</a>")  
  doc.write("</td><td valign=middle nowrap>")  
  if (USETEXTLINKS)  
    doc.write("<a href="http://www.php1.cn/">   else  
    doc.write(this.desc)  
  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  
  }  
}  
  
  
// Methods common to both objects (pseudo-inheritance)  
// ********************************************************  
  
function display()  
{  
  if (browserVersion == 1)  
    this.navObj.style.display = "block"  
  else  
    this.navObj.visibility = "show"  
}  
  
function createEntryIndex()  
{  
  this.id = nEntries  
  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)  
  
  return   
  
  if (clicked.isSelected)  
    return  
}  
  
function clickOnNode(folderId)  
{  
  var clickedFolder = 0  
  var state = 0  
  
  clickedFolder = indexOfEntries[folderId]  
  state = clickedFolder.isOpen  
  
  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 gFld(description, hreference)  
{  
  description="<font style=font-size:9pt; font-color: #00ff00;background-color:#ccff99>" + description 
  folder = new Folder(description, hreference)  
  return folder  
}  
  
function gLnk(target, description, linkData)  
{  
  description="<font style=font-size:9pt; font-color: #0000ff;background-color:#ccff99>" + description 
  fullLink = ""  
  
  if (target==0)  
  {  
    fullLink = "&#39;"+linkData+"&#39; target=main"  
  }  
  else  
  {  
    if (target==1)  
       fullLink = "&#39;http://"+linkData+"&#39; target=_top"  
    else  
       fullLink = "&#39;http://"+linkData+"&#39; target=main"  
  }  
  
  linkItem = new Item(description, fullLink)    
  return linkItem  
}  
  
function insFld(parentFolder, childFolder)  
{  
  return parentFolder.addChild(childFolder)  
}  
  
function insDoc(parentFolder, document)  
{  
  parentFolder.addChild(document)  
}  
  
// Global variables  
// ****************  
  
USETEXTLINKS = 1  
indexOfEntries = new Array  
nEntries = 0  
doc = document  
browserVersion = 0  
selectedFolder=0 
 
jsp代码
[html] 
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head> 
    <base href="http://www.php1.cn/">      
    <title>My JSP &#39;tree.jsp&#39; starting page</title> 
     
    <meta http-equiv="pragma" content="no-cache"> 
    <meta http-equiv="cache-control" content="no-cache"> 
    <meta http-equiv="expires" content="0">     
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
    <meta http-equiv="description" content="This is my page"> 
    <style type="text/css"> 
        .navtree {  background-color: #FFFFFF ; font-family: Arial, Helvetica, sans-serif; border-right: 1px solid black; margin-top: 5px; scrollbar-face-color:#CCCCCC; scrollbar-shadow-color:#FFFFFF; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#6B7A92; scrollbar-darkshadow-color:#6B7A92; scrollbar-track-color:#E2E2E2; scrollbar-arrow-color:#6B7A92 } 
    </style>   
    <script type="text/javascript" src="tree.js"></script> 
    <script type="text/javascript" > 
    function parseXml2Tree(str_xml) 
    { 
        var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");  
        xmlDoc.async = false;  
        xmlDoc.loadXML(str_xml);     
        node=xmlDoc.documentElement;//根节点  
        var i=0;//用来记数父节点数 
        var h=0;//用来查找父节点 
        var fp_array=new Array();//用来存放父目录 
        foldersTree =gFld(node.nodeName);//根目录 
        fp=foldersTree;   //父目录 
        var f1; //子目录 
        fp_array[i]=fp;     //第一个父目录为根目录     
        var rootname=node.nodeName; //根节点的名字       
        getAllNode(node);   //执行递归查找节点，生成目录树     
        initializeDocument(); 
        function getAllNode(currNode) 
        //首先查找根节点，先找其第一个孩子，如果第一个孩子存在及其兄弟，插入目录树，并记录父目录， 
        //然后把第一个节点看作当前根节点，继续查找其第一个孩子。 
        { 
                //第一个孩子 
            childNode=currNode.firstChild;               
            if(childNode!=null ) 
            { 
                if(childNode.firstChild!=null) 
                { 
                    f1=gFld(childNode.getAttribute("name"),childNode.getAttribute("link")); 
                    insFld(fp,f1); 
 
                    fp=f1;                       
                    fp_array[++i]=fp;                        
                    h++;                     
                }else{ 
                    item1= new Item("<font style=font-size:9pt; font-color: #0000ff;background-color:#ccff99>"+childNode.getAttribute("name"),childNode.getAttribute("link")); 
                    insDoc(fp,item1); 
                 
                } 
                //递归查找孩子 
                getAllNode(childNode); 
                 
            } 
            else 
            //如果没有孩子,即叶子 
            //叶子的兄弟 
            if(currNode.nodeName==rootname) 
            //如果为根节点返回。 
            {                                
                return; 
            } 
            nextBrother=currNode.nextSibling;                
            if(nextBrother==null ) 
            {                    
                currNode=currNode.parentNode;                          
                if(currNode.nodeName==rootname)  
                {                
                    return; 
                } 
                fp=fp_array[--h];                    
            } 
            else 
            { 
                 
                currNode=nextBrother;            
                if(currNode.firstChild!=null) 
                { 
                    f1=gFld(currNode.getAttribute("name"),currNode.getAttribute("link")); 
                    insFld(fp,f1); 
 
                    fp=f1;                       
                    fp_array[++i]=fp;                        
                    h++;                     
                } 
                else 
                { 
                    item1= new Item("<font style=font-size:9pt; font-color: #0000ff;background-color:#ccff99>"+currNode.getAttribute("name"),currNode.getAttribute("link")); 
                    insDoc(fp,item1); 
                }                    
                getAllNode(currNode);    
            } 
        }        
    }  
 
</script> 
  </head> 
   
  <body class="navtree"> 
      <% 
         String str_dom =   "<?xml version=\"1.0\" encoding=\"GB2312\"?>"+    
                            "<功能列表>"+ 
                            "<业务类别 link=\"\" name=\"学生管理\">"+ 
                            "<功能 link=\"/student/student.jsp\" name=\"添加学生信息\"/>"+ 
                            "<功能 link=\"/student/student.jsp\" name=\"更改学生信息\"/>"+ 
                            "<功能 link=\"/student/student.jsp\" name=\"查看学生信息\"/>"+ 
                            "<功能 link=\"/student/student.jsp\" name=\"删除学生信息\"/>"+ 
                            "<功能 link=\"/student/student.jsp\" name=\"下载学生列表\"/>"+ 
                            "</业务类别>"+ 
                            "<业务类别 link=\"\" name=\"成绩管理\">"+ 
                            "<功能 link=\"/student/student.jsp\" name=\"成绩查询\"/>"+ 
                            "<功能 link=\"/student/student.jsp\" name=\"成绩排名\"/>"+ 
                            "<功能 link=\"/student/student.jsp\" name=\"成绩汇总\"/>"+ 
                            "<功能 link=\"/student/student.jsp\" name=\"打印成绩\"/>"+ 
                            "</业务类别>"+ 
                            "<业务类别 link=\"\" name=\"缴费管理\">"+ 
                            "<功能 link=\"/student/student.jsp\" name=\"已经交费\"/>"+ 
                            "<功能 link=\"/student/student.jsp\" name=\"缴费查询\"/>"+ 
                            "<功能 link=\"/student/student.jsp\" name=\"缴费汇总\"/>"+ 
                            "</业务类别>"+ 
                            "<业务类别 link=\"\" name=\"选课管理\">"+ 
                            "<功能 link=\"/student/student.jsp\" name=\"语文\"/>"+ 
                            "<功能 link=\"/student/student.jsp\" name=\"数学\"/>"+ 
                            "<功能 link=\"/student/student.jsp\" name=\"英语\"/>"+ 
                            "<功能 link=\"/student/student.jsp\" name=\"物理\"/>"+ 
                            "<功能 link=\"/student/student.jsp\" name=\"化学\"/>"+ 
                            "<功能 link=\"/student/student.jsp\" name=\"生物\"/>"+ 
                            "</业务类别>"+ 
                            "<业务类别 link=\"\" name=\"系统设置\">"+ 
                            "<功能 link=\"/student/student.jsp\" name=\"修改密码\"/>"+ 
                            "<功能 link=\"/student/student.jsp\" name=\"用户注册\"/>"+ 
                            "<功能 link=\"/student/student.jsp\" name=\"用户注销\"/>"+ 
                            "</业务类别>"+ 
                            "</功能列表>"; 
                            str_dom=str_dom.replace(&#39;"&#39;,&#39;\&#39;&#39;); 
                            int begin_index=str_dom.indexOf("<");     
                            str_dom=str_dom.substring(begin_index+1); 
                            begin_index=str_dom.indexOf("<"); 
                            str_dom=str_dom.substring(begin_index); 
                                      
      %> 
      <script type="text/javascript"> 
        parseXml2Tree("<%=str_dom%>"); 
      </script> 
  </body> 
</html>