javascript - 使用主过滤器 "with multi"和辅助过滤器 "only one"过滤列表结果

Question

标题可能看起来令人困惑，但我会解释我想要实现的内容。

我想要什么:我想要一个 conatainer-list，其中包含名为 writing_type 的 agreement 模型中的所有“类别” ，所以每个协议(protocol)都会有一个string形式的writing_type。当然，这个container-list将有多个不同的writing_types。默认情况下，将显示所有书写类型。当选择一个或多个writing_type时，列表会将结果过滤到这些writing_type。

• 例如

• 页面已加载，列表包含所有书写类型和 DESC 中的所有行。

• 具有以下书写类型的容器列表“onclick 将选定的writing_type 突出显示为蓝色，可以选择多个，或取消选择”

• writing_types:{college_essay、大学应用程序、外语}

• 我选择college_essay和外语

• 结果仅包含大学论文和外语

• 接下来我单击名为“按截止日期过滤”的按钮

• 结果仍将包含 college_essay 和 foreign_language 并将按截止日期 DESC 进行过滤。

• 除了 due_date 之外，还会有许多不同的按钮，例如 create_at 或 price，但是只能选择这些辅助过滤器之一一次

-现在下拉列表旁边是辅助过滤器的按钮

目前，这是我现在拥有的带有下拉菜单的代码，但它们都是单独过滤的。我不确定如何首先获取 writing_type，然后单击 created_at 等按钮之一进行过滤。

<!-- filters for the categories -->
<div class="row text-center" style="margin:0;padding-bottom:10px;">
<div class="center" style="margin-left:18px;">
<div style="float:left;">
<%= link_to "Title", title_agreements_path, class: "link btn categories-button" %>
</div>
<!-- drop down with the writing types listed -->

<div class="agreements dropdown" style="float:left;margin-top:40px;">

<%= link_to '#', class:'btn categories-button dropdown-toggle', role:'button', style: 'text-decoration:none', 'aria-expanded' =>'false', data:{toggle: 'dropdown'} do %>
Writing Type
<span class="caret"></span>
<% end %>
<ul class="dropdown-menu" style="">


<h>Choose a Writing Type:</h>
<li><%= link_to "College Applications", collegeapplication_agreements_path, class: "link btn categories-button" %></li>
<li><%= link_to "College Essays", collegeessay_agreements_path, class: "link btn categories-button" %></li>
<li><%= link_to "Business Papers", businesspaper_agreements_path, class: "link btn categories-button" %></li>

<li><%= link_to "Resumes", resume_agreements_path, class: "link btn categories-button" %></li>
<li><%= link_to "Scholarship Essays", scholarshipessay_agreements_path, class: "link btn categories-button" %></li>
<li><%= link_to "High-School Essays", highschoolessay_agreements_path, class: "link btn categories-button" %></li>
<li><%= link_to "Language Translation", languagetranslation_agreements_path, class: "link btn categories-button" %></li>
</ul>
</div>

<div style="float:left;">
<%= link_to "Recent", recent_agreements_path, class: "link btn categories-button" %>
</div>
<div style="float:left;margin-top:40px;">
<%= link_to "Oldest", oldest_agreements_path, class: "link btn categories-button" %>
</div>


<div style="float:left;">
<%= link_to "Close Duedate", recentduedate_agreements_path, class: "link btn categories-button" %>
</div>
<div style="float:left;margin-top:40px;">
<%= link_to "Further Duedate", oldestduedate_agreements_path, class: "link btn categories-button" %>
</div>
<div style="float:left;">
<%= link_to "Lowest Price", lowestprice_agreements_path, class: "link btn categories-button" %>
</div>
<div style="float:left;margin-top:40px;">
<%= link_to "Highest Price", highestprice_agreements_path, class: "link btn categories-button" %>
</div>

</div>

</div>

路线.rb

 resources :agreements, path: "agreement" do
  collection do
    get :recent
    get :oldest
    get :recentduedate
    get :oldestduedate
    get :collegeapplication
    get :collegeessay
    get :businesspaper
    get :resume
    get :scholarshipessay
    get :highschoolessay
    get :languagetranslation
    get :title 
    get :lowestprice
    get :highestprice
 end
end

agreement.rb模型

scope :recent, ->{ order("created_at DESC") }
scope :oldest, ->{ order("created_at ASC") }
scope :recentduedate, ->{ order("due_date DESC") }
scope :oldestduedate, ->{ order("due_date ASC") }
scope :lowestprice, ->{ order("current_price ASC") }
scope :highestprice, ->{ order("current_price DESC") }
scope :collegeapplication, ->{ where("writing_type = ?", "College Applications") }
scope :collegeessay, ->{ where("writing_type = ?", "College Essays") }
scope :businesspaper, ->{ where("writing_type = ?", "Business Papers") }
scope :resume, ->{ where("writing_type = ?", "Resumes") }
scope :scholarshipessay, ->{ where("writing_type = ?", "Scholarship Essays") }
scope :highschoolessay, ->{ where("writing_type = ?", "High-School Essays") }
scope :languagetranslation, ->{ where("writing_type = ?", "Language Translation") }
scope :title, ->{ order("title DESC") }

 def index
   @agreements = Agreement.where("accepted = ?", false).all.paginate(:page => params[:page], :per_page => 20)

 end

 def recent
  @agreements = Agreement.recent.where("accepted = ?", false).all.paginate(:page => params[:page], :per_page => 20)
  render action: :index
end

def oldest
  @agreements = Agreement.oldest.where("accepted = ?", false).all.paginate(:page => params[:page], :per_page => 20)
  render action: :index
end

def recentduedate
  @agreements = Agreement.recentduedate.where("accepted = ?", false).all.paginate(:page => params[:page], :per_page => 20) 
  render action: :index
end

def oldestduedate
  @agreements = Agreement.oldestduedate.where("accepted = ?", false).all.paginate(:page => params[:page], :per_page => 20) 
  render action: :index
end

def collegeessay
  @agreements = Agreement.collegeessay.where("accepted = ?", false).all.paginate(:page => params[:page], :per_page => 20) 
  render action: :index
end

def resume
  @agreements = Agreement.resume.where("accepted = ?", false).paginate(:page => params[:page], :per_page => 20) 
  render action: :index
end

def languagetranslation
  @agreements = Agreement.languagetranslation.where("accepted = ?", false).all.paginate(:page => params[:page], :per_page => 20) 
  render action: :index
end

def collegeapplication
  @agreements = Agreement.collegeapplication.where("accepted = ?", false).all.paginate(:page => params[:page], :per_page => 20) 
  render action: :index
end

def businesspaper
  @agreements = Agreement.businesspaper.where("accepted = ?", false).all.paginate(:page => params[:page], :per_page => 20) 
  render action: :index
end

def scholarshipessay
  @agreements = Agreement.scholarshipessay.where("accepted = ?", false).all.paginate(:page => params[:page], :per_page => 20) 
  render action: :index
end

def highschoolessay
      @agreements = Agreement.highschoolessay.where("accepted = ?", false).all.paginate(:page => params[:page], :per_page => 20) 
      render action: :index
    end



def title
  @agreements = Agreement.title.where("accepted = ?", false).all.paginate(:page => params[:page], :per_page => 20) 
  render action: :index
end

def lowestprice
  @agreements = Agreement.lowestprice.where("accepted = ?", false).all.paginate(:page => params[:page], :per_page => 20)
  render action: :index
end

def highestprice
  @agreements = Agreement.highestprice.where("accepted = ?", false).all.paginate(:page => params[:page], :per_page => 20)
  render action: :index
end

到目前为止，我已经做到了这一点，并且它可以单独工作，但我希望过滤器结果基于选择作为主要结果的 writing_type 。谢谢!!!

Answer 1

首先，可以使用查询参数而不是单独的路径/操作，因为它们都使用不同的条件执行相同的操作。这将显着简化代码。

查看

<%= link_to "Resumes", agreements_path( writing_type: 'Resume', price_asc: true ) %>
<%= link_to "Business Papers Cheapest First", agreements_path( writing_type: 'Business Papers', price_asc: true ) %>
<%= link_to "Business Papers ", agreements_path( writing_type: 'Business Papers', price_desc: true ) %>

上面的第一个 link_to 将变为“http://localhost:3000/agreements?writing_type=resume&price_asc=true ”

然后你可以在 Controller 中执行此操作:

def index
  @agreements = Agreement.where( accepted: false ).where( params[:writing_type] ).order( sorting )
end

private
  def sorting
    sort = []  # there is probably a smarter way to do this 
    sort << 'price    ASC' if params.has_key? :price_asc
    sort << 'price   DESC' if params.has_key? :price_desc
    sort << 'duedate  ASC' if params.has_key? :duedate_asc
    sort << 'duedate DESC' if params.has_key? :duedate_desc
    sort.join ', '
  end

然后，如果您需要多项选择，您可以使用常规表单或 Javascript 来构建查询并提交。