Rails Accounts索引页如何实现加载时默认按当前Staffer自动筛选

问题描述 #

在我的Account索引页顶部，有一个包含多个<select>下拉选择器的筛选表单。我希望页面初始GET请求加载时，默认按当前Staffer筛选结果，同时保留可选择任意Staffer的能力。目前编写的代码在页面加载时已经会默认选中当前Staffer，但不会触发结果筛选，现有代码如下：

<%= bootstrap_form_with url: accounts_path, scope: :filters, remote: true, method: :get, data: {controller: "filterable"} do |f| %>
  <div class="row">
    <div class="col-3">
      <%= f.select :staffer_id, options_from_collection_for_select(Staffer.ordered, :id, :full_name, selected: current_staffer.id), {label: "Responsible Staffer", prompt: "Anyone"}, data: {action: "change->filterable#apply"} %>
    </div>

解决方案 #

方案1：后端默认赋值（推荐） #

直接在AccountsController的index动作中新增默认筛选逻辑，页面初始加载时直接返回筛选后的结果，无需额外触发前端请求，也不会出现页面内容闪动的问题：

def index
  # 未传筛选参数时默认使用当前登录员工ID作为筛选条件
  filter_params = params.fetch(:filters, {}).reverse_merge(staffer_id: current_staffer.id)
  @accounts = Account.where(staffer_id: filter_params[:staffer_id])
  # 原有其他逻辑保持不变即可
end

该方案无需修改现有前端代码，稳定性和用户体验都最优。

方案2：前端触发筛选请求 #

如果业务逻辑需要前端触发筛选，可以通过修改Stimulus控制器或者加少量JS实现加载后自动触发筛选：

方法A：修改Stimulus控制器

首先给select元素新增target标识：

<%= f.select :staffer_id, options_from_collection_for_select(Staffer.ordered, :id, :full_name, selected: current_staffer.id), {label: "Responsible Staffer", prompt: "Anyone"}, data: {action: "change->filterable#apply", filterable_target: "stafferSelect"} %>

然后修改filterable_controller.js，新增connect钩子，控制器加载完成后自动执行筛选逻辑：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["stafferSelect"]

  connect() {
    this.apply()
  }

  apply() {
    // 保留你原本的提交筛选表单的逻辑
  }
}

方法B：手动触发change事件

不想改Stimulus控制器的话，可以在表单渲染完成后加一段JS直接触发select的change事件：

<script>
  document.addEventListener("DOMContentLoaded", () => {
    document.querySelector('select[name="filters[staffer_id]"]').dispatchEvent(new Event('change'))
  })
</script>

内容的提问来源于stack exchange，提问作者Lane