其實網上現在用JS來實現一個樹形的代碼多得不成樣子了.不過偶覺得這個還算可以的(至少比我第一次寫的那個強多了o_o)

我在WEB中JS初始化如下:

< ?script?language? = ? " ?javascript? " ? > ?
Show_Root?? = ??? 2 ?
Insert_ID?? = ??? " ?content? " ?
Target_Text?? = ??? " ?ContentCortrol? " ?
Root_Name?? = ??? " ?n0? " ?
var ?myurl?? = ??? " ?http://www.blogjava.net/jkallen? " ?;

? // ?我以當節點處于1，?4?，7的時候作為父節點處理
var ?n0?? = ??? new ??Node(? " ?n0? " ?,? " ?節點0? " ?,myurl,? " ?none? " ?);
var ?n1?? = ??n0.createChild(? " ?n1? " ?,? " ?節點1? " ?,myurl,? " ?none? " ?)????;????
var ?n2?? = ??n1.createChild(? " ?n2? " ?,? " ?節點2? " ?,myurl,? " ?none? " ?)????;
var ?n3?? = ??n1.createChild(? " ?n3? " ?,? " ?節點3? " ?,myurl,? " ?none? " ?)????;
var ?n4?? = ??n0.createChild(? " ?n4? " ?,? " ?節點4? " ?,myurl,? " ?none? " ?)????;
var ?n5?? = ??n4.createChild(? " ?n5? " ?,? " ?節點5? " ?,myurl,? " ?none? " ?)????;
var ?n6?? = ??n4.createChild(? " ?n6? " ?,? " ?節點6? " ?,myurl,? " ?none? " ?)????;
var ?n7?? = ??n0.createChild(? " ?n7? " ?,? " ?節點7? " ?,myurl,? " ?none? " ?)????;
var ?n8?? = ??n7.createChild(? " ?n8? " ?,? " ?節點8? " ?,myurl,? " ?none? " ?)????;
var ?n9?? = ??n0.createChild(? " ?n9? " ?,? " ?節點9? " ?,myurl,? " ?none? " ?)????;

loadPage(? " ?n0? " ?)
? </ ?script? > ?

看起來相當笨拙.但這僅是為了表現JS罷了,其實各種node完全可以在bean中實現才是(node value也正是從DB是取才是啊)!

先來看效果啦:

其中一些主要的JS代碼分別如下:
Node的定義：

? function ??Node(name,?text,?link,?status)
{
???? this .name?? = ??name
???? this .text?? = ??text
???? this .link?? = ??link
???? this .status?? = ??status
????
???? this .depth?? = ??? 0 ?
???? this .order?? = ??? 1 ?
???? this .parent?? = ??? "" ?
???? this .folder?? = ??? 0 ?
???? this .closed?? = ??? 1 ?
????????????
???? this .childCount?? = ??? 0 ?
???? this .childArray?? = ??? new ???Array?()
????
???? this .isRoot?? = ??isRoot
???? this .isFolder?? = ??isFolder
???? this .isClosed?? = ??isClosed
???? this .isHeadChild?? = ??isHeadChild
　?????..
?????} ?

產生子節點:

? function ??expandChild(iRoot)
{
???? var ?sOutput?? = ?? this .getMyBranch(iRoot)
????sOutput?? = ??? " ?<tr?bgcolor='#FFFFFF'><td?class='text'?width=260>? " ??? + ??sOutput
????? if ??(iRoot)
???? {
????????iDepth?? = ??? 0 ?
????}
????? else ?
???? {
????????iDepth?? = ??? 1 ?
????}

????? if ??( ! ? this .isFolder())
???? {
????????sOutput?? += ??getImageStr(? 3 ?)?? + ??? " ?<a?href='? " ??? + ?? this .link?? + ??? " ?'?target='? " ??? + ??Target_Text?? + ??? " ?'>? " ?
????????????????? + ??? " ?<span?id='? " ??? + ?? this .name?? + ??? " ?'?class='node'?οnclick=changeColor('? " ??? + ?? this .name?? + ??? " ?')>? " ?
????????????????? + ?? this .text?? + ??? " ?</span></a></td>? " ?
????}
????? else ?
???? {
????????? if ??( this .depth?? >= ??iDepth)
???????? {
???????????? var ?iIconID?? = ??? 0 ?
????????????? if ??( this .isLastChild())?iIconID?? = ??? 1 ?
????????????? if ??( this .depth?? == ??iDepth)
???????????? {
????????????????? if ??( this .isHeadChild())?iIconID?? = ??? 2 ?
????????????????? if ??( this .isSingleton())?iIconID?? = ??? 3 ?
????????????}
????????????????sOutput?? += ??? " ?<a?href='JavaScript:? " ??? + ?? this .name?? + ??? " ?.changeState()'>? " ?
????????????????????? + ??getImageStr(? 1 ?,? this .isClosed()?? * ??? 4 ??? + ??iIconID)?? + ??? " ?</a>? " ?
????????????sOutput?? += ??getImageStr(? 2 ?,? this .isClosed())
????????????????????
????????????? if ??( this .link?? == ??? "" ?)
???????????? {
????????????????? // ?sOutput??+=???"?<a?href='JavaScript:?"???+??this.name??+???"?.changeState()'>?"?
????????????}
????????????? else ?
???????????? {
????????????????sOutput?? += ??? " ?<a?href='? " ??? + ?? this .link?? + ??? " ?'?target='? " ??? + ??Target_Text?? + ??? " ?'>? " ?
????????????}
????????????
????????????sOutput?? += ??? " ?<span?id='? " ??? + ?? this .name?? + ??? " ?'?class='node'? " ?
????????????? if ??( this .link?? == ??? "" ?)
???????????? {
????????????????sOutput?? += ??? " ?>? " ?
????????????}
????????????? else ?
???????????? {
????????????????sOutput?? += ??? " ??οnclick=changeColor('? " ??? + ?? this .name?? + ??? " ?')>? " ?
????????????}
????????????sOutput?? += ?? this .text?? + ??? " ?</span></a></td>? " ??? + ??? " ?<td?width=40>? " ??? + ??getStatusImageStr( this )?? + ??? " ?</td>? " ?????????}
????????sOutput?? = ??sOutput?? + ??? " ?</tr>? " ?
????????? if ??( ! ? this .isClosed())
???????? {
????????????? for ??( var ?i?? = ??? 0 ?;?i? < ?? this .childCount;?i?? ++ ?)
????????????????sOutput?? += ?? this .childArray[i].expandChild(iRoot)
????????}
????}
???? return ?sOutput
} ?

展開父節點:

? function ??expandChild(iRoot)
{
???? var ?sOutput?? = ?? this .getMyBranch(iRoot)
????sOutput?? = ??? " ?<tr?bgcolor='#FFFFFF'><td?class='text'>? " ??? + ??sOutput
????? if ??(iRoot)
???? {
????????iDepth?? = ??? 0 ?
????}
????? else ?
???? {
????????iDepth?? = ??? 1 ?
????}

????? if ??( ! ? this .isFolder())
???? {
????????sOutput?? += ??getImageStr(? 3 ?)?? + ??? " ?<a?href='? " ??? + ?? this .link?? + ??? " ?'?target='? " ??? + ??Target_Text?? + ??? " ?'>? " ?
????????????????? + ??? " ?<span?id='? " ??? + ?? this .name?? + ??? " ?'?class='node'?οnclick=changeColor('? " ??? + ?? this .name?? + ??? " ?')>? " ?
????????????????? + ?? this .text?? + ??? " ?</span></a></td>? " ?
????}
????? else ?
???? {
????????? if ??( this .depth?? >= ??iDepth)
???????? {
???????????? var ?iIconID?? = ??? 0 ?
????????????? if ??( this .isLastChild())?iIconID?? = ??? 1 ?
????????????? if ??( this .depth?? == ??iDepth)
???????????? {
????????????????? if ??( this .isHeadChild())?iIconID?? = ??? 2 ?
????????????????? if ??( this .isSingleton())?iIconID?? = ??? 3 ?
????????????}
????????????????sOutput?? += ??? " ?<a?href='JavaScript:? " ??? + ?? this .name?? + ??? " ?.changeState()'>? " ?
????????????????????? + ??getImageStr(? 1 ?,? this .isClosed()?? * ??? 4 ??? + ??iIconID)?? + ??? " ?</a>? " ?
????????????sOutput?? += ??getImageStr(? 2 ?,? this .isClosed())
????????????????????
????????????? if ??( this .link?? == ??? "" ?)
???????????? {
????????????????? // ?sOutput??+=???"?<a?href='JavaScript:?"???+??this.name??+???"?.changeState()'>?"?
????????????}
????????????? else ?
???????????? {
????????????????sOutput?? += ??? " ?<a?href='? " ??? + ?? this .link?? + ??? " ?'?target='? " ??? + ??Target_Text?? + ??? " ?'>? " ?
????????????}
????????????
????????????sOutput?? += ??? " ?<span?id='? " ??? + ?? this .name?? + ??? " ?'?class='node'? " ?
????????????? if ??( this .link?? == ??? "" ?)
???????????? {
????????????????sOutput?? += ??? " ?>? " ?
????????????}
????????????? else ?
???????????? {
????????????????sOutput?? += ??? " ??οnclick=changeColor('? " ??? + ?? this .name?? + ??? " ?')>? " ?
????????????}
????????????sOutput?? += ?? this .text?? + ??? " ?</span></a></td>? " ?
????????}
????????sOutput?? = ??sOutput?? + ??? " ?</tr>? " ?
????????? if ??( ! ? this .isClosed())
???????? {
????????????? for ??( var ?i?? = ??? 0 ?;?i? < ?? this .childCount;?i?? ++ ?)
????????????????sOutput?? += ?? this .childArray[i].expandChild(iRoot)
????????}
????}
???? return ?sOutput
} ?

注意:

從以上可以看到在WEB頁面中得有相關JS代碼初始化Insert_ID（create space to storage the menu） 如：

< table? width ="100%" >
< tr >
? < td? valign ="top" ?id ="content" ?nowrap >
? </ td >
</ tr >
</ table > ?

Insert_ID?=?"content"//JS代碼?

?

在WEB頁面中得初始化Root_Name(此處為"n0")

JS中沒有提供對父節點的判斷，而是直接（依據當前節點的下標）取得某一節點的父節點（反正菜單項一般是從DB中select的，所以你可以在bean中去處理）.我覺得也許可以將此功能也在JS中實現,將DB中的數據直接提到XML(or我們JS是從JS中提取數據的)....

?

轉載于:https://www.cnblogs.com/Nina-piaoye/archive/2006/06/29/438441.html

總結

以上是生活随笔為你收集整理的打造完美的JS树形菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。