#ancestryを使用して多階層のカテゴリーを作成する
こんな感じの入力欄を作ります。
商品出品画面を作る①へ
#導入する
＊先にカテゴリーテーブルを作成しておく必要があるので注意
Gemを導入する
Gemfile
gem 'ancestry'
ターミナル
bundle install
rails g migration add_ancestry_to_category
#カテゴリーテーブルにancestryを追加
rails db:migrate
#モデルを編集する
models/item.rb
belongs_to :category
models/category.rb
has_many :items
has_ancestry
#カテゴリーのデータを用意する
今回はseedファイルを使用します
db/seed.rb
# レディース
ladies_child_array = ['トップス','ジャケット/アウター','パンツ','スカート','ワンピース','靴','ルームウェア/パジャマ','レッグウェア','帽子','バッグ','アクセサリー','ヘアアクセサリー','小物','時計']
#２階層目(子)のカテゴーを準備
ladies_grandchild_array = [
#３階層目(孫)のカテゴーを２重配列で準備
['Tシャツ/カットソー(半袖/袖なし)','Tシャツ/カットソー(七分/長袖)','シャツ/ブラウス(半袖/袖なし)','シャツ/ブラウス(七分/長袖)','ポロシャツ','キャミソール','タンクトップ','ホルターネック','ニット/セーター','チュニック','カーディガン/ボレロ','アンサンブル','ベスト/ジレ','パーカー'],
['テーラードジャケット','ノーカラージャケット','Gジャン/デニムジャケット','レザージャケット','ダウンジャケット','ライダースジャケット','ミリタリージャケット','ダウンベスト','ジャンパー/ブルゾン','ポンチョ','ロングコート','トレンチコート','ダッフルコート','ピーコート'],
['デニム/ジーンズ','ショートパンツ','カジュアルパンツ','ハーフパンツ','チノパン','ワークパンツ/カーゴパンツ','クロップドパンツ','サロペット/オーバーオール','オールインワン','サルエルパンツ','ガウチョパンツ','その他'],
['ミニスカート','ひざ丈スカート','ロングスカート','キュロット','その他'],
['ミニワンピース','ひざ丈ワンピース','ロングワンピース','その他'],
['ハイヒール/パンプス','ブーツ','サンダル','スニーカー','ミュール','モカシン','ローファー/革靴','フラットシューズ/バレエシューズ','長靴/レインシューズ','その他'],
['パジャマ','ルームウェア'],
['ソックス','スパッツ/レギンス','ストッキング/タイツ','レッグウォーマー','その他'],
['ニットキャップ/ビーニー','ハット','ハンチング/ベレー帽','キャップ','キャスケット','麦わら帽子','その他'],
['ハンドバッグ','トートバッグ','エコバッグ','リュック/バックパック','ボストンバッグ','スポーツバッグ','ショルダーバッグ','クラッチバッグ','ポーチ/バニティ','ボディバッグ/ウェストバッグ','マザーズバッグ','メッセンジャーバッグ','ビジネスバッグ','旅行用バッグ/キャリーバッグ'],
['ネックレス','ブレスレット','バングル/リストバンド','リング','ピアス(片耳用)','ピアス(両耳用)','イヤリング','アンクレット','ブローチ/コサージュ','チャーム','その他'],
['ヘアゴム/シュシュ','ヘアバンド/カチューシャ','ヘアピン','その他'],
['長財布','折り財布','コインケース/小銭入れ','名刺入れ/定期入れ','キーケース','キーホルダー','手袋/アームカバー','ハンカチ','ベルト','マフラー/ショール','ストール/スヌード','バンダナ/スカーフ','ネックウォーマー','サスペンダー'],
['腕時計(アナログ)','腕時計(デジタル)','ラバーベルト','レザーベルト','金属ベルト','その他']
]
parent = Category.create(name: 'レディース')
# １階層目(親)のカテゴリーを作成
ladies_child_array.each_with_index do |child, i|
# 2階層目(子)のカテゴリー配列から１つずつ取り出す
child = parent.children.create(name: child)
# 取りだりた2階層目(子)のカテゴリーを作成
ladies_grandchild_array[i].each do |grandchild|
# ３階層目(孫)のi番目のカテゴリー配列から１つずつ取り出す
child.children.create(name: grandchild)
# 取りだした３階層目(孫)のカテゴリーを作成
end
end
###ポイント
ladies_grandchild_array = [[ ]]
の中に３階層目のカテゴリーを入れる
ここで、２重の配列にしておくのがポイント。
ladies_child_array.each_with_index do |child, i|
で2階層目(子)のカテゴリー配列から１つずつ取り出す時に『 i 』を付けて番号をつける。
ladies_grandchild_array[i]
とすることで、２重配列のladies_grandchild_arrayから『 i 』番目の配列を取り出す事ができる。
さらに、後ろに*.each do |grandchild|*を付けて
ladies_grandchild_array[i].each do |grandchild|
とする事で、取り出した『 i 』番目の配列から１つずつ中身を取り出す事ができる。
つまり２階層目(子)のカテゴリーに紐ずく、３階層目(孫)のカテゴリーを選別している。という事。
###seedファイル実行
ターミナル
rails db:seed
これで、カテゴリーテーブルにancestryカラムが追加され、各カテゴリー名が入っているハズ
#入力フォームを作る
###haml
new.html.haml
.sell-container__content
%h3.sell-sub-head 商品の詳細
.sell-container__content__details
.sell-title
%h3.sell-title__text
カテゴリー
%span.sell-title__require
必須
.sell-collection_select
= f.label :category_id, {class: 'sell-collection_select__label'} do
= f.collection_select :category_id, @category_parent, :id, :name, {prompt: "選択して下さい"},{ class: 'sell-collection_select__input', id: 'category-select-parent', required: "required"}
%i.fas.fa-chevron-down
.error-messages#error-category
###JS
items_new.js
$(function(){
// カテゴリーセレクトボックスのオプションを作成
function categoryOption(category){
var optionHtml = `<option value="${category.id}">${category.name}</option>`;
return optionHtml;
}
// 親カテゴリー選択後のイベント
$('#category-select-parent').on('change', function(){
let parentCategoryId = $(this).val();
//選択された親カテゴリーのIDを取得
if (parentCategoryId == ''){
//親カテゴリーが空（初期値）の時
$('#select-children-box').remove();
$('#select-grandchildren-box').remove();
//子と孫を削除するする
}else{
$.ajax({
url: '/items/category_children',
type: 'GET',
data: { parent_id: parentCategoryId },
dataType: 'json'
})
.done(function(category_children){
$('#select-children-box').remove();
$('#select-grandchildren-box').remove();
//親が変更された時、子と孫を削除するする
let optionHtml = '';
category_children.forEach(function(child){
optionHtml += categoryOption(child);
//option要素を作成する
});
$('#error-category').before(`<div class="sell-collection_select " id="select-children-box">
<label class="sell-collection_select__label" for="item_category_id">
<select class="sell-collection_select__input" id="category-select-children" required="required" name="item[category_id]">
<option value="">選択して下さい</option>
${optionHtml}
</select>
<i class="fas fa-chevron-down"></i>
</label>
</div>`
);
})
.fail(function(){
alert('カテゴリー取得に失敗しました');
});
}
});
// 子カテゴリー選択後のイベント
$('.sell-container__content__details').on('change', '#category-select-children', function(){
let childrenCategoryId = $(this).val();
//選択された子カテゴリーのIDを取得
if (childrenCategoryId == ''){
//子カテゴリーが空（初期値）の時
$('#select-grandchildren-box').remove();
//孫以下を削除する
}else{
$.ajax({
url: '/items/category_grandchildren',
type: 'GET',
data: { child_id: childrenCategoryId },
dataType: 'json'
})
.done(function(category_grandchildren){
$('#select-grandchildren-box').remove();
//子が変更された時、孫を削除するする
let optionHtml = '';
category_grandchildren.forEach(function(grandchildren){
optionHtml += categoryOption(grandchildren);
//option要素を作成する
});
$('#error-category').before(`<div class="sell-collection_select " id="select-grandchildren-box">
<label class="sell-collection_select__label" for="item_category_id">
<select class="sell-collection_select__input" id="category-select-grandchildren" required="required" name="item[category_id]">
<option value="">選択して下さい</option>
${optionHtml}
</select>
<i class="fas fa-chevron-down"></i>
</label>
</div>`
);
})
.fail(function(){
alert('カテゴリー取得に失敗しました');
});
}
});
});
流れ
- １階層目のカテゴリーを選択
- 選択されたカテゴリー情報をJSで所得し、ajaxでコントローラに送る
- コントローラーでDBから１階層目のカテゴリーに紐付く２階層目のカテゴリーを全て取得し、jbuilderへ送る
- jbuilderでデータをHTTP型からJSON型に変更し、配列にしてJSへ送る
- JSのdone(function(category_children)で受け取り、処理をしていく
- optionを保持するからの変数を用意
- 受け取ったJSON型のデータの配列から１つずつ取り出し、JSの上で用意した
var optionHtml =<option value="${category.id}">${category.name}</option>;
でセレクトボックスで表示する為のオプションを作成 - return optionHtml;で６で用意した変数に格納する
- HTMLを作成してnew.html.hamlにはめ込む
- ３階層目も同じ要領で
コントローラー
items.controller.rb
def new
@item = Item.new
@category_parent = Category.where("ancestry is null")
end
# 親カテゴリーが選択された後に動くアクション
def category_children
@category_children = Category.find("#{params[:parent_id]}").children
#親カテゴリーに紐付く子カテゴリーを取得
end
# 子カテゴリーが選択された後に動くアクション
def category_grandchildren
@category_grandchildren = Category.find("#{params[:child_id]}").children
#子カテゴリーに紐付く孫カテゴリーの配列を取得
end
jbuilder
category_children.json.jbuilder
json.array! @category_children do |child|
json.id child.id
json.name child.name
end
category_grandchildren.json.jbuilder
json.array! @category_grandchildren do |grandchild|
json.id grandchild.id
json.name grandchild.name
end
#ポイント
seedファイルでの作成方法がわかれば大体できる。
セレクトボックスで表示する為には、optionタグを作成する
name属性が同じフォームは基本的に上書きされる
