其实网上现在用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' 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"//JS代码
在WEB页面中得初始化Root_Name(此处为"n0")
JS中没有提供对父节点的判断,而是直接(依据当前节点的下标)取得某一节点的父节点(反正菜单项一般是从DB中select的,所以你可以在bean中去处理).我觉得也许可以将此功能也在JS中实现,将DB中的数据直接提到XML(or我们JS是从JS中提取数据的)....