时间戳

首页 > 解决方案 > Rails 管理员：下拉条目太多

ruby-on-rails - Rails 管理员：下拉条目太多

问题描述

在我的 rails_admin 应用程序中，我有一个表“分支”，它引用了另一个名为“警报”的表。在“分支”中，我想只选择一个警报并有一个搜索框来搜索这些警报。

目前，我只能创建一个下拉列表，其中包含与该分支相关的所有警报，这会导致呈现许多条目（超过 25k）并消耗内存。我找不到一个示例如何创建一个显示“条目太多，搜索以选择”的下拉列表，类似于has_and_belongs_to_many.

这是它的外观：

class Branch < ApplicationRecord
...
  # this is fine and works as expected, selecting only the first (and only) entry
  show do
    field :maintenance_period_trigger_alarm_id do
      formatted_value do
        alarm = Alarm.where(id: bindings[:object].maintenance_period_trigger_alarm_id).first
        path = bindings[:view].show_path(model_name: 'alarm', id: alarm.id)
        bindings[:view].link_to(alarm.name, path)
      end
    end
  end
  ...
  # this is where all elements are automatically loaded and rendered in the dropdown
  edit do
    field :maintenance_period_trigger_alarm_id, :enum do
      enum do
        Alarm.where(branch_id: bindings[:controller].params[:id]).collect{ |alarm| [alarm.name, alarm.id] }
      end
    end
  end

我不确定如何启用简单的“条目太多”消息以不在那里显示 25k 条目。

标签： ruby-on-railsrubymemoryrails-admin

解决方案

@zokkker13，这是一个非常基本的充实示例，它将people_controller.rb按姓名查询人。

将 select2 添加到您的页面下载
select2.js和 select2.css，将它们放入您的供应商文件夹并将它们添加到您的 applications.js 和 application.css 文件中，或者只是 将它们从 CDN 包含到您的页面中。加载您的页面并使用浏览器的开发工具确保已加载。select2.js

添加新路线到config/routes.rb

resources :people do
  collection do
    get 'search'
  end
end

重新启动您的服务器。

将搜索操作添加到people_controller.rb

# coding: utf-8
class PeopleController < ApplicationController

  def search
    
    # https://select2.org/data-sources/ajax
    term = params[:term]
    matches = Person.where("name ILIKE ?", "%#{term}%").to_a
    
    # https://select2.org/data-sources/formats
    matches.map!{ |m| { id: m.id, text: m.name } }
    
    respond_to do |format|
      format.json {
        render status: 200, json: { results: matches }
      }
    end

  end

end

将搜索框添加到页面
将其添加到您的 html 页面：

<%= select_tag :search, nil, id: 'select2-live-search-people' %>
<script>
  $(document).ready( function() {
    $('#select2-live-search-people').select2({
      ajax: { url: '/people/search', dataType: 'json' },
      placeholder: 'Start typing to search...',
      width: '300px',
      minimumInputLength: 3
    });
  } );
</script>

..或者这个，如果你使用haml：

= select_tag :search, nil, id: 'select2-live-search-people'
:javascript
  $(document).ready( function() {
    $('#select2-live-search-people').select2({
      ajax: { url: '/people/search', dataType: 'json' },
      placeholder: 'Start typing to search...',
      width: '300px',
      minimumInputLength: 3
    });
  } );

修改代码，以便查询现有模型和现有数据。然后重新加载页面并开始输入。您现在应该看到选择选项已根据搜索词的结果进行了调整。使用该minimumInputLength参数来控制发出 ajax 调用最少需要多少个字符。如果有 25k 选项，您可能希望增加更多。

推荐阅读