其實網上現在用JS來實現一個樹形的代碼多得不成樣子了.不過偶覺得這個還算可以的(至少比我第一次寫的那個強多了o_o)
我在WEB中JS初始化如下:
<
?script?language?
=
?
"
?javascript?
"
?
>
?
Show_Root??
=
???
2
?
Insert_ID??
=
???
"
?content?
"
?
Target_Text??
=
???
"
?ContentCortrol?
"
?
Root_Name??
=
???
"
?n0?
"
?
var
?myurl??
=
???
"
?http://www.aygfsteel.com/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'?onclick=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??
+=
???
"
??onclick=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'?onclick=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??
+=
???
"
??onclick=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"http://JS代碼?
?
在WEB頁面中得初始化Root_Name(此處為"n0")
JS中沒有提供對父節點的判斷，而是直接（依據當前節點的下標）取得某一節點的父節點（反正菜單項一般是從DB中select的，所以你可以在bean中去處理）.我覺得也許可以將此功能也在JS中實現,將DB中的數據直接提到XML(or我們JS是從JS中提取數據的)....
肚子餓了,先閃人....