Rails 3下拉索引页面过滤器排序

时间:2013-10-20 17:13:29

标签: ruby-on-rails filter

我正在使用Rails 3和ruby 1.9.2。我有一个店面列出了几个产品,我想让用户能够按dept_type过滤产品。 dept_type是产品的属性,而不是单独的模型。我的模型中有以下内容:

class Product < ActiveRecord::Base
  DEPT_TYPES = ["Baby","Beauty", "Household", "Pets"]

我的控制器:

class StoreController < ApplicationController
  def index
    @title= "Home"
    if Product.all.collect(&:dept) == (params[:dept])
      @products= Product.send(params[:dept])
    else
      @products = Product.order(:premium)
    end
  end

在我看来:

<%= select("dept", "dept_type", Product.all.collect(&:dept)) %>
  <% @products.each do |product| %>
    ...
  <%end%>

当我加载页面时,我有所有DEPT_TYPES选项的下拉列表但是当我选择一个没有任何反应时。我需要做什么才能让页面只更新和过滤选定的部门?

1 个答案:

答案 0 :(得分:2)

我会在select和UJS上使用ajax来更改内容,从部分加载。

e.g。

#/railsapp/app/controllers/products_controller.rb
def index
  @title= "Home"
  if Product.all.collect(&:dept_type) == (params[:dept])
    @products= Product.send(params[:dept])
  else
    @products = Product.order(:premium)
  end 

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

在你看来

#/railsapp/app/views/products/index.html.erb
<%= form_tag('products', :remote => true) do %>
  <%= select_tag "dept", options_from_collection_for_select(@products, "id", "dept_type"),  { :include_blank => true , :class => "product_select"} %>
<% end %>

<div id="products_list"></div>

然后添加javascript(本例中为coffeescript)

#/railsapp/app/assets/javascripts/products.js.coffee
$(document).ready ->
  $(".product_select").on "change", ->
    $.ajax
      url: "/products"
      type: "GET"
      dataType: "script"
      data:
        dept_type: $(".product_select").val()

因此,coffeescript在更改选择框时对产品控制器的索引操作发出ajax请求。控制器将呈现UJS模板,因为dataType是脚本。现在为UJS

#/railsapp/app/views/products/index.js.erb
$("#products_list").html('<%= j render("product_list") %>').fadeIn('slow');

这只是在部分product_list上调用javascript转义渲染,其中包括:

#/railsapp/app/views/products/_product_list.html.erb
<%- @products.each do |product| %>
  <%= product.name %>
<% end %>

所以现在你将有一个选择框,它在页面加载时呈现html,在ajax请求上运行javascript以确定正确的部门,并在从下拉列表中更改选择时交换列表。