下拉过滤器以在索引页面上按类别对产品进行排序

Question

我对 Rails 很陌生，正在建立一个在线商店。我目前有一个产品模型和一个具有关联的类别模型：产品属于_to 一个类别和一个类别 has_many 产品。我希望购物者能够在下拉列表中选择一个类别，并且索引页面上的产品将仅显示该类别中的项目。

我能够使用 form_tag 获得一个下拉菜单来显示所有类别，但是当我在一个类别上选择时，索引页面不会过滤以仅显示该类别。

产品索引.html.erb：

<%= form_tag('products', :remote => true) do %>
  <%= select_tag "category", options_from_collection_for_select(Category.all, "id", "name"),  { :include_blank => true , :class => "product_select"} %>
  <%= submit_tag 'Filter' %>
<% end %>

产品控制器：

  def index
    if Product.all.collect == (params[:category])
        @products= Product.send(params[:category])   
    else
        @products = Product.order(:title)   
    end 

      respond_to do |format|
        format.html # index.html.erb
        format.js # index.js.erb
        format.json { render json: @products } 
      end  
  end

application.js：

$(document).ready ->   $(".product_select").on "change", ->
    $.ajax
      url: "/products"
      type: "GET"
      dataType: "script"
      data:
        dept_type: $(".product_select").val()

提前感谢您的帮助，如果需要更多信息，请告诉我。

Answer 1

我不确定您是否可以像那样从您的视图中调用数据库（我不这么认为）。如果你能做到，你不应该这样做。

更改 Category.all

这里

<%= select_tag "category", options_from_collection_for_select(Category.all, "id", "name"),  { :include_blank => true , :class => "product_select"} %>

到@categories 并将其设置在您的控制器中。

什么是价值

 $(".product_select").val()

此外，您可能希望产品和类别具有多对多关系。如果您希望一种产品属于 2 个不同的类别，会发生什么情况？

Answer 2

对于更改类别下拉列表中的值的 ajax 请求，您处于正确的轨道上。

1. 在产品索引页面的 div 上，显示产品的部分会向该 div 添加一个 ID（例如 products_div）。
   示例代码 (_products_list.html.erb)

   <div id="products_div">
     <%= @products.each do |product| %>
     # bla bla bla display product attributes
   </div>
   

2. 然后在您的控制器上进行索引，您应该更新它以使用来自 ajax 请求的数据
   示例代码 (products_controller)

   if params[:dept_type].present?  
     @products = Product.where(dept_id: params[:dept_type])  
   else  
     @products = Product.all  
   end  
   

3. 然后在视图文件products.js.erb上，替换products_div的内容
   示例代码（index.js.erb）

   $("#products_div").html("<%= escape_javascript(render partial: 'products_list', locals: { products: @products } ) %>");
   

#3 中的代码会将 products_div 的内容替换为您在更改类别下拉列表时过滤的新 @products