Ruby on Rails导航菜单自动生成的方法

开发 开发工具
本文介绍了Ruby on Rails导航菜单自动生成的方法。实现方法是,通过深度优先遍历来生成菜单,在便利过程中构建菜单的html编码,主要是使用了一个@htmlmenu的string来拼接生成的html代码,最终显示在页面中。

最近在做的一个ROR的web项目中遇到如下问题:

产品可以按类分类导航浏览,主要可以分为A,B,C三类,三类之下还有其他分类,同时,基类和其下的分类都可以由用户扩展。从横向上,主类可以由用户扩展,纵向上,用户也可以扩展。

类别信息存储与categories表中:

id:integer         主键

name:string        类别名称

parentid:integer   类别的父类

要求:

生成导航菜单,并且可以含有子类的菜单可以通过点击展开或关闭,并且可以按类别导航产品。

实现Ruby on Rails导航菜单:

通过深度优先遍历来生成菜单,在便利过程中构建菜单的html编码,主要是使用了一个@htmlmenu的string来拼接生成的html代码,最终显示在页面中。

Ruby on Rails导航菜单代码:

  1. def index  
  2.     @htmlmenu="" 
  3.     @htmlmenu+= "< ul>" 
  4.     @root = Category.find(:all,:conditions=>['parentid=0'])  
  5.     @root.each { |item|  
  6.     if Category.find_by_parentid(item.id)  
  7.     @htmlmenu+= "< li>< a href='#ChildMenu#{item.id}' onclick=\"DoMenu('ChildMenu#{item.id}')\">" 
  8.     else 
  9.       @htmlmenu+= "< li>< a href='/categories/#{item.id}'>" 
  10.     end 
  11.     @htmlmenu+= item.name  
  12.     @htmlmenu+= "< /a>" 
  13.     buildmenu item  
  14.     @htmlmenu+= "< /li>" 
  15.     }  
  16.     @htmlmenu+= "< /ul>" 
  17.   end 
  18.   private  
  19.   def buildmenu category  
  20.     @children = Category.find_all_by_parentid(category.id)  
  21.     if @children.size!=0  
  22.       @htmlmenu+= "< ul id='ChildMenu#{category.id}' class='collapsed'>" 
  23.       @children.each { |item|  
  24.         if Category.find_all_by_parentid(item.id).size!=0  
  25.           @htmlmenu+= "< li>< a href='#ChildMenu#{item.id}' onclick=\"DoMenu('ChildMenu#{item.id}')\">" 
  26.         else 
  27.                 @htmlmenu+= "< li>< a href='/categories/#{item.id}'>" 
  28.         end 
  29.  
  30.         @htmlmenu+= item.name  
  31.         @htmlmenu+= "< /a>" 
  32.         buildmenu item  
  33.         @htmlmenu+= "< /li>" 
  34.         }  
  35.       @htmlmenu+= "< /ul>" 
  36.  
  37.     end 
  38.       
  39.   end 

遍历方法为private的buildmenu方法。

说明:parentid=0是为了找到所有的基类,他们的parentid默认为0;

在代码中需要加入css和js:

  1. < script type="text/javascript"> 
  2.  
  3.  
  4. function DoMenu(emid){  
  5.     var obj = document.getElementById(emid);  
  6.     obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");  
  7.    
  8. }  
  9. --> 
  10. < /script> 
  11. < style> 
  12.  ul.collapsed {  
  13.  display: none;  
  14. }  
  15. < /style> 

有关Ruby on Rails导航菜单的补充:

1.这是一个雏形,关于性能问题有以下几点:

1.1  代码可以优化,有些比较判断没有必要,懒得去掉了:)

1.2  如果类别数据增多,如果担心过多的数据库访问,可以把这些写到程序初始化里去,不过缺点是新增的类别需要重启服务器后可以生效

2.我觉得这个拿去做文件系统遍历很好,而且可以直接生成html页面~

【编辑推荐】

  1. Ruby on Rails安装及MySQL数据库配置指南
  2. Ruby on Rails开发的五点建议
  3. Ruby的瓶颈 以及PHP何以成为Web之王
  4. 浅谈Ruby和JRuby的学习
  5. Web开发谁更高效 Java对决Ruby on Rails
责任编辑:yangsai 来源: JavaEye博客
相关推荐

2009-12-17 09:31:02

Ruby on Rai

2009-08-27 10:21:22

Ruby on Rai

2009-12-16 17:24:26

Ruby on Rai

2009-12-17 11:14:50

Ruby on Rai

2009-08-06 09:13:36

Ruby on Rai

2010-09-25 14:39:29

Bruce Tate

2009-09-29 17:04:29

2009-12-17 15:02:32

Ruby on Rai

2015-10-14 17:27:18

性能

2009-12-17 14:29:50

Ruby on Rai

2009-12-14 15:30:43

安装Ruby on R

2009-12-16 16:37:59

Ruby on Rai

2015-10-10 11:00:05

RubyRails性能

2009-06-17 10:08:32

Ruby on Rai安装Ruby

2009-07-20 09:12:54

Ruby on Rai

2009-12-16 15:23:33

Ruby on rai

2009-12-16 17:37:31

Ruby on Rai

2009-12-16 15:41:10

Ruby on Rai

2009-12-17 17:37:42

Ruby on Rai

2009-12-16 16:24:00

Ruby on Rai
点赞
收藏

51CTO技术栈公众号