【Rails】動的カテゴリーメニューの実装

こんにちはdaissh04です。

本日は久しぶりにRailsの記事を書きたいと思います。

ホームページでよく見る、カテゴリーメニューの実装方法について

イメージは以下画像のようなものです。

一番左の親カテゴリにマウスを当てると、その右の子カテゴリーが表示され、子カテゴリーをにマウスを当てると孫カテゴリーが表示されるというものです。

親、子、孫のカテゴリー関係の実装についてはここでは書きません。

railsのgemファイルancestryで簡単に実装できますので、ググってみてください。

$(function(){

$('.headerBox__main__bottom__select__category__categorySearch').on('mouseenter',function(){

$('.category_menu').removeClass('noShow');

$('.categorySearch').removeClass('noShow');

$('.categorySearch').css('height','520px');

var url = '/items'

$.ajax({

type: "GET",

url: url,

dataType: 'json',

})

まずは最初に.headerBox__main__bottom__select__category__categorySearchにmouseenterすると以下を発火させます。

cateogry_menuからnoShowクラスをリムーブする。

→これにより、親リストが表示されます。

そしてajaxでrailsコントローラーに非同期通信してメソッドを動かします。

コントローラーでは、indexアクションを動かします。

カテゴリーテーブルの中でancestryカラムがnilのデータをwhereで抽出し

@category_parentに代入してます

def index

@category_parent = Category.where(ancestry: nil)

respond_to do |format|

format.html

format.json

end

end

index.json.jbuilderのファイルの中で、コントローラーで取得した@cateogry_parentをjsonでjsに送り返します。データを簡易的にcategoryParent.idとcategoryParent.nameに変換します

json.array! @category_parent do |categoryParent|

json.id categoryParent.id

json.name categoryParent.name

end

データをjsでdoneで受け取ります

.done(function(categoryParent){

categoryParent.forEach(function(categoryParent){

appendHTML(categoryParent)

});

});

})

コントローラーでwhereで取得したデータは配列になるのでeachでバラし、そのデータの数だけapendHTMLメソッドを動かし、htmlを書き加えて行きます。

$(function(){

function appendHTML(categoryParent){

var html = `<div class = 'categorySearch__parentitem'>

<a href= "/items/search/${categoryParent.id}", id = "${categoryParent.id}", class = "category_link">${categoryParent.name}</a>

</div>`

$('.categorySearch').append(html);

}

上がappendHTMLの中身です。

ポイントは各親要素のdivにcategoryParent.idでカテゴリーテーブルのidを持たせていることです。

これにより、後続の処理でこのカテゴリにマウスエンターをした際に、このidを再度ajaxでコントローラーに投げて、その子要素を取得し、再度jsで子カテゴリーリストをhtmlに作り込むと行った流れです。

もっと詳しく知りたいという方はコメントください。

回答いたします。