JAVA

人生若只如初见,何事秋风悲画扇。

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  50 随笔 :: 25 文章 :: 157 评论 :: 0 Trackbacks

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

肚子饿了,先闪人....

posted on 2006-03-28 18:15 Jkallen 阅读(17535) 评论(13)  编辑  收藏 所属分类: AJAX

评论

# re: 打造完美的JS树形菜单 2006-04-20 13:42 qinjm
产生子节点  回复  更多评论
  

# re: 打造完美的JS树形菜单 2006-09-28 08:53 小丫
能否给出能运行出来您贴图效果的完整代码??比较了许多树形菜单,只觉得您这个是最好的,可惜运行不了。遗憾!!! gsyfj@163.com  回复  更多评论
  

# re: 打造完美的JS树形菜单 2006-09-28 08:54 小丫
能否给出能运行出来您贴图效果的完整代码??比较了许多树形菜单,只觉得您这个是最好的,可惜运行不了。遗憾!!!  回复  更多评论
  

# re: 打造完美的JS树形菜单 2006-09-28 17:31 蓝天
近二天找个时间一定全部贴出来! :-)  回复  更多评论
  

# 好东西,快贴出来啊 2007-03-22 14:00 天下有贼
我顶  回复  更多评论
  

# re: 打造完美的JS树形菜单[未登录] 2007-07-04 10:08 无名
能不能搞个能运行的完整的工程给我啊,谢谢了!
  回复  更多评论
  

# re: 打造完美的JS树形菜单 2007-07-06 13:32 蓝天
我发现了更好的东东里面有JS的树
共享下:

http://www.scbr.com/  回复  更多评论
  

# re: 打造完美的JS树形菜单 2008-06-18 12:45 fan
我还没弄明白,接收能力太差!!!
我也希望有个运行后的完整代码提供.
有的话,请发给我,在此谢谢了!

我的联系方式:254743383
邮箱:254743383@qq.com  回复  更多评论
  

# re: 打造完美的JS树形菜单 2009-06-08 15:15 000
这个无限级可刷新Js树型菜单 dTree
 1、可设置无限级菜单
 2、不必使用框架
 3、可刷新,多页面内跳转不会影响菜单
 4、可限级创造子树
 5、支持目前主流浏览器:IE5,6,7
 6、节点图片可设置切换图片效果


下载url:http://www.destroydrop.com/javascripts/tree/
  回复  更多评论
  

# re: 打造完美的JS树形菜单 2010-07-11 18:50 jenny lu
看看@qinjm
  回复  更多评论
  

# re: 打造完美的JS树形菜单 2010-07-11 18:51 jenny lu
看看  回复  更多评论
  

# re: 打造完美的JS树形菜单 2010-10-08 21:42 liuzhongshu
是的,dTree要更好一些, http://www.liuzhongshu.com/code/javascript-tree-dtree.html  回复  更多评论
  

# re: 打造完美的JS树形菜单[未登录] 2016-05-26 18:01 dd
dsd  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: