如何在 Rails 中使用下拉列表和 ajax 过滤数据

Posted 2023-05-09

【中文标题】如何在 Rails 中使用下拉列表和 ajax 过滤数据

【英文标题】：How to filter data with dropdown and ajax in Rails

【发布时间】：2018-01-31 20:37:38

【问题描述】：

我的应用有一个仪表板，用户可以在其中显示和过滤数据库中的项目。目前，我的控制器根据@assigned_user_ids 的数组从Report 中选择所有记录。

dashboard_controller.rb 索引操作

@latest_report = Report.where.not(:assigned_user_id => nil).where(:assigned_user_id => @assigned_user_ids).where(reporting_date: Report.select('MAX(reporting_date)')).order(:assigned_user_id)

在仪表板索引视图中，我有一个select_tag，用户可以在其中选择all 或仅选择特定的assigned_user_id。 select_tag 从 @employees 实例变量中获取值，该变量包含一组可用的 assigned_user_ids。

index.html.erb

<%= select_tag "teams", options_from_collection_for_select(@employees, "assigned_user_id", "full_name"), :include_blank => 'All'  %>

我现在要做的是在这一点上包含 ajax，以便应用执行以下步骤：

如果用户通过此值选择特定的assigned_user_id 过滤器@latest_report 并通过ajax 呈现它 如果用户通过所有可用的assigned_user_ids选择"All"过滤@latest_report并通过ajax渲染

我怎样才能做到这一点（不使用 gem）？

更新 我设法使它与几个link_to 和一个专用的route 一起工作。但是，我很困惑使用select_tag 来解决这个问题（因为这没有链接到我通过 ajax 呈现部分的路由）以及选择“全部”的选项。

【问题讨论】：

您可以为报告创建一个部分，然后使用 js 格式请求 ajax 并使用成功响应呈现部分

如果我有 link_to 而不是 select_tag，这将有效。但是我不知道如何使用 select_tag 和选项“All”来实现这一点。你能帮忙吗？

【参考方案1】：

我会给出用 Ajax 填充 Select 的想法，然后你可以应用到你的案例中，好吗？

首先，您的文件夹中需要两个文件 WHAT_WILL_BE_UPDATED 视图（在我的示例中是城市 - 我将根据所选的州更新城市！）：

Cities view
  -> _cities.html.erb
  -> update_city.js.coffee

在您的部分城市：

<% @city.all.each do |t| %>
  <option value="<%= t.id %>"><%= t.city_name %></option>
<% end %>

在您的 update_city.js.coffee 文件中：

$("#select_city").empty()
  .append("<%= escape_javascript(render partial: 'cities/city', object: @city ) %>")

# Here, "#select_city" is the ID of your Select! So, we are basically empty your current Select and then populate with what you have in your partial _city.

要解决 ajax 请求，请将其添加到资产中的 JS 文件中：

$ ->
  $(document).on 'change', '#state_id', (evt) ->
    $.ajax 
      url: '/cities/update_city'
      type: 'GET'
      dataType: 'script'
      data: 
        state_id: $("#state_id option:selected").val()
      
      error: (jqXHR, textStatus, errorThrown) ->
        console.log("AJAX Error: #textStatus")
      success: (data, textStatus, jqXHR) ->
        console.log("AJAX Sucesss: #textStatus")

# Here, we are add a "on change" event to your your Select responsible to trigger the Ajax call. In this example, the Select with id "state_id" is responsible. I'm passing as arguments to Ajax the value selected in the Select with id "state_id"!

在城市控制器中我们有这个：

def update_city
  @city = City.by_state(params[:state_id]).order(:city_name)
  respond_to do |format|
    format.js render layout: false
  end
end

private
  def city_params
    params.require(:city).permit(:state_id)
  end  

在我看来，我会选择这两个：

<%= m.label :state, "State" %>
<%= m.select(:state_id, State.select("id, name").order(:name).collect |p| [ p.name, p.id ] ,  include_blank: false, selected: m.object.state_id,  id: 'state_id' ) %>

<%= m.label :city, "City" %>
<%= m.select(:city_id, City.by_state(State.first.id).collect |p| [ p.city_name, p.id ] ,  include_blank: false, selected: m.object.city_id ,  id: 'select_city' ) %>

希望能帮到你！ 祝你好运！

【讨论】：

@Oliver 我的回答对你有帮助吗？