Question

我有Rails 5.2.2，并且正在尝试实现祖先的gem。

所以我想要什么：

我希望用户为汽车零件创建报价，但是在新表格中，我希望能够选择类别/子类别，然后输入我拥有的其他详细信息，然后提交表格以创建提供。假设有人想增加销售刹车片。但是首先必须选择父类别。例如

汽车-> 刹车-> 刹车片

因此，在选择“刹车片”后，他可以创建报价。

我所拥有的：

#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"

问题是：如何在我的视图->零件-> 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，即可始终从中获取父类别。如果您需要两个以上的下拉菜单，只需再添加一个功能或（更好地）更改它，就可以将相关的下拉菜单作为参数传递

Rails祖先宝石+以新形式渲染并选择类别/子类别

1 个答案: