新聞中心
最近在做的一個(gè)ROR的web項(xiàng)目中遇到如下問題:

站在用戶的角度思考問題,與客戶深入溝通,找到潮州網(wǎng)站設(shè)計(jì)與潮州網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗(yàn),讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品,建站類型包括:成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、申請(qǐng)域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋潮州地區(qū)。
產(chǎn)品可以按類分類導(dǎo)航瀏覽,主要可以分為A,B,C三類,三類之下還有其他分類,同時(shí),基類和其下的分類都可以由用戶擴(kuò)展。從橫向上,主類可以由用戶擴(kuò)展,縱向上,用戶也可以擴(kuò)展。
類別信息存儲(chǔ)與categories表中:
id:integer 主鍵
name:string 類別名稱
parentid:integer 類別的父類
要求:
生成導(dǎo)航菜單,并且可以含有子類的菜單可以通過點(diǎn)擊展開或關(guān)閉,并且可以按類別導(dǎo)航產(chǎn)品。
實(shí)現(xiàn)Ruby on Rails導(dǎo)航菜單:
通過深度優(yōu)先遍歷來生成菜單,在便利過程中構(gòu)建菜單的html編碼,主要是使用了一個(gè)@htmlmenu的string來拼接生成的html代碼,最終顯示在頁面中。
Ruby on Rails導(dǎo)航菜單代碼:
- 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默認(rèn)為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>
有關(guān)Ruby on Rails導(dǎo)航菜單的補(bǔ)充:
1.這是一個(gè)雛形,關(guān)于性能問題有以下幾點(diǎn):
1.1 代碼可以優(yōu)化,有些比較判斷沒有必要,懶得去掉了:)
1.2 如果類別數(shù)據(jù)增多,如果擔(dān)心過多的數(shù)據(jù)庫訪問,可以把這些寫到程序初始化里去,不過缺點(diǎn)是新增的類別需要重啟服務(wù)器后可以生效
2.我覺得這個(gè)拿去做文件系統(tǒng)遍歷很好,而且可以直接生成html頁面~
分享標(biāo)題:RubyonRails導(dǎo)航菜單自動(dòng)生成的方法
文章來源:http://www.dlmjj.cn/article/dheddjj.html


咨詢
建站咨詢
