始创于2000年 股票代码:831685
咨询热线:0371-60135900 注册有礼 登录
  • 挂牌上市企业
  • 60秒人工响应
  • 99.99%连通率
  • 7*24h人工
  • 故障100倍补偿
您的位置: 网站首页 > 帮助中心>文章内容

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

发布时间:  2012/8/29 18:02:36

最近在做的一个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页面~


本文出自:亿恩科技【www.enkj.com】

服务器租用/服务器托管中国五强!虚拟主机域名注册顶级提供商!15年品质保障!--亿恩科技[ENKJ.COM]

  • 您可能在找
  • 亿恩北京公司:
  • 经营性ICP/ISP证:京B2-20150015
  • 亿恩郑州公司:
  • 经营性ICP/ISP/IDC证:豫B1.B2-20060070
  • 亿恩南昌公司:
  • 经营性ICP/ISP证:赣B2-20080012
  • 服务器/云主机 24小时售后服务电话:0371-60135900
  • 虚拟主机/智能建站 24小时售后服务电话:0371-60135900
  • 专注服务器托管17年
    扫扫关注-微信公众号
    0371-60135900
    Copyright© 1999-2019 ENKJ All Rights Reserved 亿恩科技 版权所有  地址:郑州市高新区翠竹街1号总部企业基地亿恩大厦  法律顾问:河南亚太人律师事务所郝建锋、杜慧月律师   京公网安备41019702002023号
      0
     
     
     
     

    0371-60135900
    7*24小时客服服务热线