Rails祖先gem +以新的形式渲染并选择category / subcategory

Question

我有Rails 5.2.2，我正在尝试实现祖先的宝石。

所以我想要的：

我希望用户为汽车零件创建报价，但在新表单中，我希望能够选择类别/子类别，然后输入我拥有的其他详细信息，然后提交表单以创建报价。让我们说有人想添加卖Brake Pads。但首先必须选择父类别。例如

汽车 - >制动器 - >制动蹄片

因此，在选择Brake Pads后，他可以创建报价。

是）我有的：

#category.rb
class Category < ApplicationRecord
  has_ancestry
  has_many :parts
end

-

#part.rb
class Part < ApplicationRecord
  belongs_to :category
end

现在，我已经在控制台中创建了一个，以使其工作：例如

car = Category.create!(name: "Car")
brakes = Category.create!(name: "Brakes", parent: car)
brake_pads = Category.create!(name: "Brake Pads", parent: brakes)

我已经运行了迁移rails g migration add_category_to_parts category:references。

我的观点是：

#views/parts/new.html.haml
.container
  %h2.center Create offer
  = simple_form_for(@part, html: {class: "form-group" }) do |f|
    .form-group.col-md-8.col-md-offset-2.well
      = f.input :title
      = f.input :make_name, label: "Make"
      = f.input :code, label: 'Part number'
      = f.association :condition, label_method: :name, prompt: "-"
      = f.input :description
      .form-actions
        = f.button :submit, class: "btn btn-primary btn-dark-blue"

问题是：我如何在我的views-> parts - > new.html.haml表单中呈现类别/子类别，包含3个下拉列表（每个子类别一个，因为我将有许多类别/子类别），因此用户可以选择它们然后创建优惠？

Answer 1

在任何情况下都需要CategoriesController，因为这里需要依赖的下拉列表。当用户在第一个中选择类别时，您需要发出AJAX请求以获取子类别，依此类推

# config/routes.rb
resources :categories, only: [] do
  get :select_item, on: :collection
end

# app/assets/javascripts/application.js
$('#first-dropdown').on('change', function() {
  $.ajax({
    url: 'categories/select_item?category_id=' + $(this).val(),
    dataType: 'json',
    success: function(data) {
      var childElement = $('#second-dropdown');
      childElement.html('');
      data.forEach(function(v) {
        var id = v.id;
        var name = v.name;
        childElement.append('<option value="' + id + '">' + name + '</option>');
      });
    }
  });
});

# app/controllers/categories_controller.rb
Class CategoriesController < ApplicationController
  def select_item
    category = @category.find params[:category_id]
    render json: category.children
  end
end 

# app/inputs/fake_select_input.rb
class FakeSelectInput < SimpleForm::Inputs::CollectionSelectInput
  def input(wrapper_options = nil)
    label_method, value_method = detect_collection_methods

    merged_input_options = merge_wrapper_options(input_html_options, wrapper_options).merge(input_options.slice(:multiple, :include_blank, :disabled, :prompt))

    template.select_tag(
      attribute_name, 
      template.options_from_collection_for_select(collection, value_method, label_method, selected: input_options[:selected], disabled: input_options[:disabled]), 
      merged_input_options
    )
  end
end

# views/parts/new.html.haml
.form-group.col-md-8.col-md-offset-2.well
  = f.input :title
  = f.input :make_name, label: "Make"
  = f.input :code, label: 'Part number'
  = f.association :condition, label_method: :name, prompt: "-"
  = f.input :description
  = f.input :parent_category_id, as: :fake_select, collection: Category.roots, input_html: { id: 'first-dropdown' }
  = f.input category_id, collection: [], input_html: { id: 'second-dropdown' }
  .form-actions
    = f.button :submit, class: "btn btn-primary btn-dark-blue"

由于simple_form依赖于使用模型，因此您需要为非模型字段（父类别）创建自定义输入。您只需要将一个category_id保存到@part，可以始终从中获取父类别。如果您需要更多，而不是2个下拉菜单，只需添加一个函数或（更好）更改它，这样您就可以将依赖下拉列表作为参数传递