大家看看我这样的方法可以么 - JavaScript论坛

楼主

问题点数：0 回复次数：0

大家看看我这样的方法可以么

想做一个树状的网页导航类似注册表编辑器的样子有右键的添加删除节点功能

因为节点数量不多层也少不想用数据库想将所有的节点以特定的数据结构存储到一个文件中

每一个节点包括a1 a2 a3 name addr 5个值

比如第一章1 0 0第一章第一节1 1 0第二章第三节第一部分2 3 1

这样做是不是过于麻烦有没有更简单的方法

以下是静态树状导航的代码

<html>
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb_2312-80">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<title>Administrator--Menu</title>
<link rel="stylesheet" href="ftie4style.css">

<script language="JavaScript">

// Definition of class Folder
// *****************************************************************

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='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='ftv2mlastnode.gif' width=16 height=22 border=0></a>")
leftSide = leftSide + "<img src='ftv2blank.gif' width=16 height=22>"
this.isLastNode = 1
}
else
{
this.renderOb(leftSide + auxEv + "<img name='nodeIcon" + this.id + "' src='ftv2mnode.gif' width=16 height=22 border=0></a>")
leftSide = leftSide + "<img src='ftv2vertline.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 + "' ")
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)
{ //在当前帧页的main帧显示课程内容
//doc.write("<a href='" + this.hreference + "' TARGET=\"Main\" ")
doc.write("<a href=" + this.hreference + " TARGET=main ")

if (browserVersion > 0)
doc.write("onClick='javascript:clickOnFolder("+this.id+")'")
doc.write(">")
}
else
doc.write("<a>")
// doc.write("<a href='javascript:clickOnFolder("+this.id+")'>")
}

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='ftv2lastnode.gif' width=16 height=22>")
leftSide = leftSide + "<img src='ftv2blank.gif' width=16 height=22>"
}
else
{
this.renderOb(leftSide + "<img src='ftv2node.gif' width=16 height=22>")
leftSide = leftSide + "<img src='ftv2vertline.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)
doc.write("<a href=" + this.link + ">")
doc.write("<img 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=" + this.link + ">" + this.desc + "</a>")
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)
{
folder = new Folder(description, hreference)
return folder
}

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

if (target==0)
{ //在当前帧页的main帧显示课程内容
fullLink = linkData+" target=main"
//fullLink = "'"+linkData+"' target=\"Main\"" 此语句不对

}
// else
// {
// if (target==1) //打开一个新的窗口
// fullLink = "'http://"+linkData+"' target=_blank"
// 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 = 0
indexOfEntries = new Array
nEntries = 0
doc = document
browserVersion = 0
selectedFolder=0

</script>

<script>

USETEXTLINKS = 1

foldersTree = gFld("<strong>现代计算机网络技术</strong>", "")
insDoc(foldersTree, gLnk(0, "前言", "frame_right.htm"))
// 第一章计算机网络与Internet
aux1 = insFld(foldersTree, gFld("第一章计算机网络与Internet", "chapter01/ch01.htm"))

aux2 = insFld(aux1, gFld("1.1 计算机网络", "chapter01/ch0101.htm"))
insDoc(aux2, gLnk(0, "1.1.1 计算机网络的定义", "chapter01/ch010101.htm"))
insDoc(aux2, gLnk(0, "1.1.2 计算机网络的发展和现状", "chapter01/ch010102.htm"))
insDoc(aux2, gLnk(0, "1.1.3 计算机网络的分类", "chapter01/ch010103.htm"))
insDoc(aux2, gLnk(0, "1.1.4 计算机网络的拓扑结构", "chapter01/ch010104.htm"))
insDoc(aux2, gLnk(0, "1.1.5 计算机网络的体系结构", "chapter01/ch010105.htm"))

aux2 = insFld(aux1, gFld("1.2 Internet因特网", "chapter01/ch0102.htm"))
insDoc(aux2, gLnk(0, "1.2.1 Internet的定义", "chapter01/ch010201.htm"))
insDoc(aux2, gLnk(0, "1.2.2 Internet的发展与现状", "chapter01/ch010202.htm"))
insDoc(aux2, gLnk(0, "1.2.3 国内Internet的发展", "chapter01/ch010203.htm"))
insDoc(aux2, gLnk(0, "1.2.4 Internet的概念及应用", "chapter01/ch010204.htm"))
insDoc(aux2, gLnk(0, "1.2.5 Internet的体系结构", "chapter01/ch010205.htm"))

// 第二章 TCP/IP的物理层及有关概念
aux1 = insFld(foldersTree, gFld("第二章 TCP/IP的物理层及有关概念", "chapter02/ch02.htm"))

insDoc(aux1, gLnk(0, "2.1.网络传输介质双绞线", "chapter02/ch0201.htm"))
insDoc(aux1, gLnk(0, "2.2.数据交换技术", "chapter02/ch0202.htm"))
insDoc(aux1, gLnk(0, "2.3.CSMA/CD协议", "chapter02/ch0203.htm"))
insDoc(aux1, gLnk(0, "2.4.以太网帧格式", "chapter02/ch0204.htm"))

//第三章 TCP/IP的网络层
aux1 = insFld(foldersTree, gFld("第三章 TCP/IP的网络层", "chapter03/ch03.htm"))

aux2 = insFld(aux1, gFld("3.1 Internet主机名与地址", "chapter03/ch0301.htm"))
insDoc(aux2, gLnk(0, "3.1.1 物理地址（MAC地址）", "chapter03/ch030101.htm"))
insDoc(aux2, gLnk(0, "3.1.2 IP地址", "chapter03/ch030102.htm"))
insDoc(aux2, gLnk(0, "3.1.3 域名表示", "chapter03/ch030103.htm"))

aux2 = insFld(aux1, gFld("3.2 名字与地址的解析", "chapter03/ch0302.htm"))
insDoc(aux2, gLnk(0, "3.2.1 IP地址到MAC地址的转换", "chapter03/ch030201.htm"))
insDoc(aux2, gLnk(0, "3.2.2 MAC地址到IP地址的转换", "chapter03/ch030202.htm"))
insDoc(aux2, gLnk(0, "3.2.3 域名解析", "chapter03/ch030203.htm"))

aux2 = insFld(aux1, gFld("3.3 IP协议：无连接数据报传送", "chapter03/ch030301.htm"))
insDoc(aux2, gLnk(0, "3.3.1 IP协议的特点及地位", "chapter03/ch030301.htm"))
insDoc(aux2, gLnk(0, "3.3.2 IP数据报格式", "chapter03/ch030302.htm"))

aux2 = insFld(aux1, gFld("3.4 IP协议：差错与控制协议（ICMP）", "chapter03/ch030401.htm"))
insDoc(aux2, gLnk(0, "3.4.1 ICMP协议与IP协议的关系", "chapter03/ch030401.htm"))
insDoc(aux2, gLnk(0, "3.4.2 ICMP报文格式", "chapter03/ch030402.htm"))

aux2 = insFld(aux1, gFld("3.5 IP协议：数据报寻径", "chapter03/ch0305.htm"))
insDoc(aux2, gLnk(0, "3.5.1 寻径的概念", "chapter03/ch030501.htm"))
insDoc(aux2, gLnk(0, "3.5.2 寻径表（路由表）", "chapter03/ch030502.htm"))
insDoc(aux2, gLnk(0, "3.5.3 寻径算法", "chapter03/ch030503.htm"))
insDoc(aux2, gLnk(0, "3.5.4 寻径协议", "chapter03/ch030504.htm"))

aux2 = insFld(aux1, gFld("3.6 IPv6协议", "chapter03/ch0306.htm"))

//第四章 TCP/IP的传输层
aux1 = insFld(foldersTree, gFld("第四章 TCP/IP的传输层", "chapter04/ch04.htm"))
aux2 = insFld(aux1, gFld("4.1 基本概念", "chapter04/ch040101.htm"))
insDoc(aux2, gLnk(0, "4.1.1 传输层的连接管理", "chapter04/ch040101.htm"))
insDoc(aux2, gLnk(0, "4.1.2 滑动窗口与流控", "chapter04/ch040102.htm"))
insDoc(aux2, gLnk(0, "4.1.3 传输层端口", "chapter04/ch040103.htm"))

insDoc(aux1, gFld("4.2 UDP用户数据报协议", "chapter04/ch0402.htm"))

insDoc(aux1, gFld("4.3 TCP传输控制协议", "chapter04/ch0403.htm"))

aux2 = insFld(aux1, gFld("4.4 IP地址复用", "chapter04/ch0404.htm"))
insDoc(aux2, gLnk(0, "4.4.1 子网编址", "chapter04/ch040401.htm"))
insDoc(aux2, gLnk(0, "4.4.2 透明网关", "chapter04/ch040402.htm"))
insDoc(aux2, gLnk(0, "4.4.3 代理ARP", "chapter04/ch040403.htm"))
insDoc(aux2, gLnk(0, "4.4.4 超网编址", "chapter04/ch040404.htm"))

aux2 = insFld(aux1, gFld("4.5 Socket编程", "chapter04/ch040501.htm"))
insDoc(aux2, gLnk(0, "4.5.1 进程间通信需要解决的问题", "chapter04/ch040501.htm"))
insDoc(aux2, gLnk(0, "4.5.2 C/S模型", "chapter04/ch040502.htm"))
insDoc(aux2, gLnk(0, "4.5.3 Socket界面", "chapter04/ch040503.htm"))
insDoc(aux2, gLnk(0, "4.5.4 实现框架", "chapter04/ch040504.htm"))
insDoc(aux2, gLnk(0, "4.5.5 其他函数", "chapter04/ch040505.htm"))
insDoc(aux2, gLnk(0, "4.5.6 一个通用的实用程序", "chapter04/ch040506.htm"))

// 第五章 TCP/IP的应用层
aux1 = insFld(foldersTree, gFld("第五章 TCP/IP的应用层", "chapter05/ch05.htm"))

insDoc(aux1, gFld("5.1 Telnet协议", "chapter05/ch0501.htm"))

insDoc(aux1, gFld("5.2 Ftp协议", "chapter05/ch0502.htm"))

insDoc(aux1, gFld("5.3 E-mail有关协议", "chapter05/ch0503.htm"))

// 第六章 Intranet的体系结构
aux1 = insFld(foldersTree, gFld("第六章 Intranet的体系结构", "chapter06/ch06.htm"))

insDoc(aux1, gFld("6.1 概论", "chapter06/ch0601.htm"))

insDoc(aux1, gFld("6.2 Intranet的硬件结构", "chapter06/ch0602.htm"))

insDoc(aux1, gFld("6.3 Intranet的网络软件结构", "chapter06/ch0603.htm"))

insDoc(aux1, gFld("6.4 建立自己的Intranet", "chapter06/ch0604.htm"))

// 第七章 Intranet的关键技术
aux1 = insFld(foldersTree, gFld("第七章 Intranet的关键技术", "chapter07/ch07.htm"))

insDoc(aux1, gFld("7.1 概论", "chapter07/ch0701.htm"))

insDoc(aux1, gFld("7.2 HTTP协议", "chapter07/ch0702.htm"))

insDoc(aux1, gFld("7.3 HTML与XML", "chapter07/ch0703.htm"))

insDoc(aux1, gFld("7.4 Web浏览器", "chapter07/ch0704.htm"))

insDoc(aux1, gFld("7.5 Web服务器", "chapter07/ch0705.htm"))

insDoc(aux1, gFld("7.6 CGI接口", "chapter07/ch0706.htm"))

insDoc(aux1, gFld("7.7 ASP、PHP与JSP", "chapter07/ch0707.htm"))

insDoc(aux1, gFld("7.8 Java与JavaScript", "chapter07/ch0708.htm"))

insDoc(aux1, gFld("7.9 VRML", "chapter07/ch0709.htm"))

insDoc(aux1, gFld("7.10 CORBA", "chapter07/ch0710.htm"))

insDoc(aux1, gFld("7.11 VPN与WLAN技术", "chapter07/ch0711.htm"))

insDoc(aux1, gFld("7.12 Web Service技术", "chapter07/ch0712.htm"))

// 第八章 Intranet的系统管理
aux1 = insFld(foldersTree, gFld("第八章 Intranet的系统管理", "chapter08/ch08.HTM"))

insDoc(aux1, gFld("8.1 概论", "chapter08/ch0801.htm"))

insDoc(aux1, gFld("8.2 网络管理", "chapter08/ch0802.htm"))

insDoc(aux1, gFld("8.3 Intranet的系统管理", "chapter08/ch0803.htm"))

insDoc(aux1, gFld("8.4 Intranet系统管理所采用的方法", "chapter08/ch0804.htm"))

insDoc(aux1, gFld("8.5 Intranet系统管理的策略", "chapter08/ch0805.htm"))

insDoc(aux1, gFld("8.6 Intranet系统管理的有关技术", "chapter08/ch0806.htm"))

insDoc(aux1, gFld("8.7 Intranet网络管理的有关产品", "chapter08/ch0807.htm"))

// 第九章 Intranet的安全
aux1 = insFld(foldersTree, gFld("第九章 Intranet的安全", "chapter09/ch09.HTM"))

insDoc(aux1, gFld("9.1 防火墙技术", "chapter09/ch0901.htm"))

// 第十章黑客技术分析与防范
var a="第十章黑客技术分析与防范"
aux1 = insFld(foldersTree, gFld(a, "chapter10/黑客分析与防范技术.ppt"))

</script>
<script>
initializeDocument()
</script>

</html>

搜索更多相关主题的帖子: 导航　数据库　 PUBLIC　注册表　编辑器　