其實(shí)網(wǎng)上現(xiàn)在用JS來(lái)實(shí)現(xiàn)一個(gè)樹(shù)形的代碼多得不成樣子了.不過(guò)偶覺(jué)得這個(gè)還算可以的(至少比我第一次寫(xiě)的那個(gè)強(qiáng)多了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  "  ;

  //  我以當(dāng)節(jié)點(diǎn)處于1， 4 ，7的時(shí)候作為父節(jié)點(diǎn)處理
var  n0   =     new   Node(  "  n0  "  ,  "  節(jié)點(diǎn)0  "  ,myurl,  "  none  "  );
 var  n1   =   n0.createChild(  "  n1  "  ,  "  節(jié)點(diǎn)1  "  ,myurl,  "  none  "  )    ;    
 var  n2   =   n1.createChild(  "  n2  "  ,  "  節(jié)點(diǎn)2  "  ,myurl,  "  none  "  )    ;
 var  n3   =   n1.createChild(  "  n3  "  ,  "  節(jié)點(diǎn)3  "  ,myurl,  "  none  "  )    ;
 var  n4   =   n0.createChild(  "  n4  "  ,  "  節(jié)點(diǎn)4  "  ,myurl,  "  none  "  )    ;
 var  n5   =   n4.createChild(  "  n5  "  ,  "  節(jié)點(diǎn)5  "  ,myurl,  "  none  "  )    ;
 var  n6   =   n4.createChild(  "  n6  "  ,  "  節(jié)點(diǎn)6  "  ,myurl,  "  none  "  )    ;
 var  n7   =   n0.createChild(  "  n7  "  ,  "  節(jié)點(diǎn)7  "  ,myurl,  "  none  "  )    ;
 var  n8   =   n7.createChild(  "  n8  "  ,  "  節(jié)點(diǎn)8  "  ,myurl,  "  none  "  )    ;
 var  n9   =   n0.createChild(  "  n9  "  ,  "  節(jié)點(diǎn)9  "  ,myurl,  "  none  "  )    ;

loadPage(  "  n0  "  )
  </  script  >  

看起來(lái)相當(dāng)笨拙.但這僅是為了表現(xiàn)JS罷了,其實(shí)各種node完全可以在bean中實(shí)現(xiàn)才是(node value也正是從DB是取才是啊)!

先來(lái)看效果啦:


其中一些主要的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
　     ..
     }  


產(chǎn)生子節(jié)點(diǎn):

  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
}  


展開(kāi)父節(jié)點(diǎn):

  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頁(yè)面中得有相關(guān)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頁(yè)面中得初始化Root_Name(此處為"n0")

JS中沒(méi)有提供對(duì)父節(jié)點(diǎn)的判斷，而是直接（依據(jù)當(dāng)前節(jié)點(diǎn)的下標(biāo)）取得某一節(jié)點(diǎn)的父節(jié)點(diǎn)（反正菜單項(xiàng)一般是從DB中select的，所以你可以在bean中去處理）.我覺(jué)得也許可以將此功能也在JS中實(shí)現(xiàn),將DB中的數(shù)據(jù)直接提到XML(or我們JS是從JS中提取數(shù)據(jù)的)....