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

我在WEB中JS初始化如下:

<  script language  =   "  javascript  "   >  
Show_Root   =     2  
Insert_ID   =     "  content  "  
Target_Text   =     "  ContentCortrol  "  
Root_Name   =     "  n0  "  
 var  myurl   =     "  http://www.tkk7.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中提取數據的)....