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       totalHeight = totalHeight + this.children[i].navObj.clip.height  
      subEntries = this.subEntries()  
    if (this.isOpen)  
      totalHeight = 0 - totalHeight  
    for (fIt = this.id + subEntries + 1; 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.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.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 = ""  
  else  
    auxEv = ""  
  
  if (level>0)  
    if (lastNode) //the last &＃39;brother&＃39; in the children array  
    {  
      this.renderOb(leftSide + auxEv + "")  
      leftSide = leftSide + ""   
      this.isLastNode = 1  
    }  
    else  
    {  
      this.renderOb(leftSide + auxEv + "")  
      leftSide = leftSide + ""  
      this.isLastNode = 0  
    }  
  else  
    this.renderOb("")  
    
  if (nc > 0)  
  {  
    level = level + 1  
    for (i=0 ; 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("")  
  }  
    
  doc.write("

  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("")   
  doc.write("

")     doc.write(leftSide)     this.outputLink()     doc.write("   doc.write("src=&＃39;" + this.iconSrc+"&＃39; border=0>")     doc.write("

")     if (USETEXTLINKS)     {       this.outputLink()       doc.write(this.desc + "")     }     else       doc.write(this.desc)     doc.write("

")  
    
  if (browserVersion == 2) {  
    doc.write("")  
  }  
  
  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("     if (browserVersion > 0)  
      doc.write("OnClick=&＃39;Javascript:clickOnFolder("+this.id+")&＃39;")  
    doc.write(">")  
  }  
  else  
    doc.write("")  
//  doc.write("")    
}  
  
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     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 + "")  
      leftSide = leftSide + ""   
    }  
    else  
    {  
      this.renderOb(leftSide + "")  
      leftSide = leftSide + ""  
    }  
  else  
    this.renderOb("")    
}  
  
function drawItem(leftSide)  
{  
  if (browserVersion == 2)  
    doc.write("")  
      
  doc.write("   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("

")     doc.write(leftSide)     doc.write("")     doc.write("   doc.write("src=&＃39;"+this.iconSrc+"&＃39; border=0>")     doc.write("")     doc.write("

")     if (USETEXTLINKS)       doc.write("" + this.desc + "")     else       doc.write(this.desc)     doc.write("

")  
    
  if (browserVersion == 2)  
    doc.write("")  
  
  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       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(" ")  
  
    // close the whole tree  
    clickOnNode(0)  
    // open the root folder  
    clickOnNode(0)  
  }  
}  
  
// Auxiliary Functions for Folder-Treee backward compatibility  
// *********************************************************  
  
function gFld(description, hreference)  
{  
  description="" + description 
  folder = new Folder(description, hreference)  
  return folder  
}  
  
function gLnk(target, description, linkData)  
{  
  description="" + 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+"/"; 
%> 
 
 
 
   
     
     
     
     
     
     
         
     
     
       
     
     
   
   
   
      <% 
         String str_dom =   ""+    
                            "<功能列表>"+ 
                            "<业务类别 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); 
                                      
      %> 
       
   
html>