其实网上现在用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中提取数据的)....