Ruby on Rails導(dǎo)航菜單自動(dòng)生成的方法

最近在做的一個(gè)ROR的web項(xiàng)目中遇到如下問(wèn)題：

產(chǎn)品可以按類(lèi)分類(lèi)導(dǎo)航瀏覽，主要可以分為A，B，C三類(lèi)，三類(lèi)之下還有其他分類(lèi)，同時(shí)，基類(lèi)和其下的分類(lèi)都可以由用戶(hù)擴(kuò)展。從橫向上，主類(lèi)可以由用戶(hù)擴(kuò)展，縱向上，用戶(hù)也可以擴(kuò)展。

類(lèi)別信息存儲(chǔ)與categories表中：

id:integer         主鍵

name:string        類(lèi)別名稱(chēng)

parentid:integer   類(lèi)別的父類(lèi)

要求：

生成導(dǎo)航菜單，并且可以含有子類(lèi)的菜單可以通過(guò)點(diǎn)擊展開(kāi)或關(guān)閉，并且可以按類(lèi)別導(dǎo)航產(chǎn)品。

實(shí)現(xiàn)Ruby on Rails導(dǎo)航菜單：

通過(guò)深度優(yōu)先遍歷來(lái)生成菜單，在便利過(guò)程中構(gòu)建菜單的html編碼，主要是使用了一個(gè)@htmlmenu的string來(lái)拼接生成的html代碼，最終顯示在頁(yè)面中。

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方法。

說(shuō)明：parentid=0是為了找到所有的基類(lèi)，他們的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)于性能問(wèn)題有以下幾點(diǎn)：

1.1  代碼可以?xún)?yōu)化，有些比較判斷沒(méi)有必要，懶得去掉了：）

1.2  如果類(lèi)別數(shù)據(jù)增多，如果擔(dān)心過(guò)多的數(shù)據(jù)庫(kù)訪(fǎng)問(wèn)，可以把這些寫(xiě)到程序初始化里去，不過(guò)缺點(diǎn)是新增的類(lèi)別需要重啟服務(wù)器后可以生效

2.我覺(jué)得這個(gè)拿去做文件系統(tǒng)遍歷很好，而且可以直接生成html頁(yè)面～

服務(wù)器租用/服務(wù)器托管中國(guó)五強(qiáng)！虛擬主機(jī)域名注冊(cè)頂級(jí)提供商！15年品質(zhì)保障！--億恩科技[ENKJ.COM]