JavaScript實作樹形選單
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 'brother' in the children array
{
this.renderOb(leftSide + auxEv + "<img src="/static/imghw/default1.png" data-src="tree.js" class="lazy" name='nodeIcon" + this.id + "' src='ftv2mlastnode.gif' style="max-width:90%"JavaScript實作樹形選單" ></a>")
leftSide = leftSide + "<img src="/static/imghw/default1.png" data-src="tree.js" class="lazy" src='ftv2blank.gif' style="max-width:90%"JavaScript實作樹形選單" >"
this.isLastNode = 1
}
else
{
this.renderOb(leftSide + auxEv + "<img src="/static/imghw/default1.png" data-src="tree.js" class="lazy" name='nodeIcon" + this.id + "' src='ftv2mnode.gif' style="max-width:90%"JavaScript實作樹形選單" ></a>")
leftSide = leftSide + "<img src="/static/imghw/default1.png" data-src="tree.js" class="lazy" src='ftv2vertline.gif' style="max-width:90%"JavaScript實作樹形選單" >"
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 src="/static/imghw/default1.png" data-src="tree.js" class="lazy" name='folderIcon" + this.id + "' ")
doc.write("src='" + this.iconSrc+"' 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='javascript:clickOnFolder("+this.id+")'")
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 'brother' in the children array
{
this.renderOb(leftSide + "<img src="/static/imghw/default1.png" data-src="tree.js" class="lazy" src='ftv2lastnode.gif' style="max-width:90%"JavaScript實作樹形選單" >")
leftSide = leftSide + "<img src="/static/imghw/default1.png" data-src="tree.js" class="lazy" src='ftv2blank.gif' style="max-width:90%"JavaScript實作樹形選單" >"
}
else
{
this.renderOb(leftSide + "<img src="/static/imghw/default1.png" data-src="tree.js" class="lazy" src='ftv2node.gif' style="max-width:90%"JavaScript實作樹形選單" >")
leftSide = leftSide + "<img src="/static/imghw/default1.png" data-src="tree.js" class="lazy" src='ftv2vertline.gif' style="max-width:90%"JavaScript實作樹形選單" >"
}
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)
doc.write("<a href="http://www.php1.cn/"> doc.write("<img src="/static/imghw/default1.png" data-src="tree.js" class="lazy" id='itemIcon"+this.id+"' ")
doc.write("src='"+this.iconSrc+"' 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 = "'"+linkData+"' target=main"
}
else
{
if (target==1)
fullLink = "'http://"+linkData+"' target=_top"
else
fullLink = "'http://"+linkData+"' 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 'tree.jsp' 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" ></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('"','\'');
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>登入後複製
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
<🎜>：種植花園 - 完整的突變指南
3 週前
By DDD
<🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
如何修復KB5055612無法在Windows 10中安裝？
3 週前
By DDD
北端：融合系統，解釋
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Mandragora：巫婆樹的耳語 - 如何解鎖抓鉤
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何使用WebSocket和JavaScript實現線上語音辨識系統
Dec 17, 2023 pm 02:54 PM
如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系
WebSocket與JavaScript：實現即時監控系統的關鍵技術
Dec 17, 2023 pm 05:30 PM
WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技
如何利用JavaScript和WebSocket實現即時線上點餐系統
Dec 17, 2023 pm 12:09 PM
如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單
如何使用WebSocket和JavaScript實現線上預約系統
Dec 17, 2023 am 09:39 AM
如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工
JavaScript與WebSocket：打造高效率的即時天氣預報系統
Dec 17, 2023 pm 05:13 PM
JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We
簡易JavaScript教學：取得HTTP狀態碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest
javascript如何使用insertBefore
Nov 24, 2023 am 11:56 AM
用法：在JavaScript中，insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數：要插入的新節點和參考節點（即新節點將要插入的位置的節點）。
JavaScript與WebSocket：打造高效率的即時影像處理系統
Dec 17, 2023 am 08:41 AM
JavaScript是一種廣泛應用於Web開發的程式語言，而WebSocket則是一種用於即時通訊的網路協定。結合二者的強大功能，我們可以打造一個高效率的即時影像處理系統。本文將介紹如何利用JavaScript和WebSocket來實作這個系統，並提供具體的程式碼範例。首先，我們需要明確指出即時影像處理系統的需求和目標。假設我們有一個攝影機設備，可以擷取即時的影像數
