其实网上现在用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
"
;
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
//
我以当节点处于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
"
) ;
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
loadPage(
"
n0
"
)
</
script
>
看起来相当笨拙.但这仅是为了表现JS罢了,其实各种node完全可以在bean中实现才是(node value也正是从DB是取才是啊)!
先来看效果啦:
![o_menu.jpg](https://i-blog.csdnimg.cn/blog_migrate/98409c25bf8188680de215979b30c2bc.jpeg)
其中一些主要的JS代码分别如下:
Node的定义:
function
Node(name, text, link, status)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/1fa987a29c6482f53d401256f96355eb.gif)
{
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)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/1fa987a29c6482f53d401256f96355eb.gif)
{
var sOutput = this .getMyBranch(iRoot)
sOutput = " <tr bgcolor='#FFFFFF'><td class='text' width=260> " + sOutput
if (iRoot)
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
{
iDepth = 0
}
else
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
{
iDepth = 1
}
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
if ( ! this .isFolder())
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
{
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
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
{
if ( this .depth >= iDepth)
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
{
var iIconID = 0
if ( this .isLastChild()) iIconID = 1
if ( this .depth == iDepth)
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
{
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 == "" )
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
{
// sOutput += " <a href='JavaScript: " + this.name + " .changeState()'> "
}
else
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
{
sOutput += " <a href=' " + this .link + " ' target=' " + Target_Text + " '> "
}
sOutput += " <span id=' " + this .name + " ' class='node' "
if ( this .link == "" )
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
{
sOutput += " > "
}
else
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
{
sOutput += " οnclick=changeColor(' " + this .name + " ')> "
}
sOutput += this .text + " </span></a></td> " + " <td width=40> " + getStatusImageStr( this ) + " </td> " }
sOutput = sOutput + " </tr> "
if ( ! this .isClosed())
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
{
for ( var i = 0 ; i < this .childCount; i ++ )
sOutput += this .childArray[i].expandChild(iRoot)
}
}
return sOutput
}
展开父节点:
function
expandChild(iRoot)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/1fa987a29c6482f53d401256f96355eb.gif)
{
var sOutput = this .getMyBranch(iRoot)
sOutput = " <tr bgcolor='#FFFFFF'><td class='text'> " + sOutput
if (iRoot)
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
{
iDepth = 0
}
else
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
{
iDepth = 1
}
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
if ( ! this .isFolder())
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
{
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
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
{
if ( this .depth >= iDepth)
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
{
var iIconID = 0
if ( this .isLastChild()) iIconID = 1
if ( this .depth == iDepth)
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
{
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 == "" )
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
{
// sOutput += " <a href='JavaScript: " + this.name + " .changeState()'> "
}
else
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
{
sOutput += " <a href=' " + this .link + " ' target=' " + Target_Text + " '> "
}
sOutput += " <span id=' " + this .name + " ' class='node' "
if ( this .link == "" )
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
{
sOutput += " > "
}
else
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
{
sOutput += " οnclick=changeColor(' " + this .name + " ')> "
}
sOutput += this .text + " </span></a></td> "
}
sOutput = sOutput + " </tr> "
if ( ! this .isClosed())
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
{
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
>
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
Insert_ID = "content"//JS代码
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
在WEB页面中得初始化Root_Name(此处为"n0")
JS中没有提供对父节点的判断,而是直接(依据当前节点的下标)取得某一节点的父节点(反正菜单项一般是从DB中select的,所以你可以在bean中去处理).我觉得也许可以将此功能也在JS中实现,将DB中的数据直接提到XML(or我们JS是从JS中提取数据的)....