RoR 自动生成分类导航菜单

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

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

类别信息存储与categories表中:
id:integer 主键
name:string 类别名称
parentid:integer 类别的父类

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

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

def index
@htmlmenu=""
@htmlmenu+= "<ul>"
@root = Category.find(:all,:conditions=>['parentid=0'])
@root.each { |item|
if Category.find_by_parentid(item.id)
@htmlmenu+= "<li><a href='#ChildMenu#{item.id}' onclick=\"DoMenu('ChildMenu#{item.id}')\">"
else
@htmlmenu+= "<li><a href='/categories/#{item.id}'>"
end
@htmlmenu+= item.name
@htmlmenu+= "</a>"
buildmenu item
@htmlmenu+= "</li>"
}
@htmlmenu+= "</ul>"
end
private
def buildmenu category
@children = Category.find_all_by_parentid(category.id)
if @children.size!=0
@htmlmenu+= "<ul id='ChildMenu#{category.id}' class='collapsed'>"
@children.each { |item|
if Category.find_all_by_parentid(item.id).size!=0
@htmlmenu+= "<li><a href='#ChildMenu#{item.id}' onclick=\"DoMenu('ChildMenu#{item.id}')\">"
else
@htmlmenu+= "<li><a href='/categories/#{item.id}'>"
end

@htmlmenu+= item.name
@htmlmenu+= "</a>"
buildmenu item
@htmlmenu+= "</li>"
}
@htmlmenu+= "</ul>"

end

end


遍历方法为private的buildmenu方法。
说明:parentid=0是为了找到所有的基类,他们的parentid默认为0;

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

<script type="text/javascript">


function DoMenu(emid){
var obj = document.getElementById(emid);
obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");

}
-->
</script>
<style>
ul.collapsed {
display: none;
}
</style>


补充:
1.这是一个雏形,关于性能问题有以下几点:
1.1 代码可以优化,有些比较判断没有必要,懒得去掉了:)
1.2 如果类别数据增多,如果担心过多的数据库访问,可以把这些写到程序初始化里去,不过缺点是新增的类别需要重启服务器后可以生效
2.我觉得这个拿去做文件系统遍历很好,而且可以直接生成html页面~
[color=red]3.希望有朋友可以提出自己的建议或是意见,大家交流[/color]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值