活动admin 可搜索选择
可搜索的选中框( 通过 选择2用于 ActiveAdmin 格式和过滤器。 将活动admin资源 DSL 扩展至 允许定义 JSON 端点从同步获取选项.
安装
添加 activeadmin-searchable_select 到您的宝石文件 :
gem 'activeadmin-searchable_select'
通过Sprockets使用资产
导入样式表并需要javascript:
// active_admin.css.scss
@import "active_admin/searchable_select";
// active_admin.js
//= require active_admin/searchable_select
通过Webpacker(或任何其他资产捆绑)使用资产作为国家预防机制模块(Yarn软件包)
执行 :
$ npm i @codevise/activeadmin-searchable_select
或者说
$ yarn add @codevise/activeadmin-searchable_select
或者手动添加到 package.json数字 :
"dependencies": {
"@codevise/activeadmin-searchable_select": "1.6.0"
}
并执行 :
$ yarn
将以下行添加到 app/javascript/active_admin.js数字 :
import '@codevise/activeadmin-searchable_select';
将以下行添加到 app/javascript/stylesheets/active_admin.scss数字 :
@import '@codevise/activeadmin-searchable_select';
使用量
使选择框可以搜索
要将搜索功能添加到选定的框中,请使用
:searchable_select 输入类型 :
ActiveAdmin.register Product do
form do |f|
f.input(:category, as: :searchable_select)
end
end
这对过滤器也有效 :
ActiveAdmin.register Product do
filter(:category, as: :searchable_select)
end
默认情况下,您只能一次选择一个过滤器. 你们可以 指定一个多选择,其方式是:
ActiveAdmin.register Product do
filter(:category, as: :searchable_select, multiple: true)
end
通过 Ajax 获取选项
对于大型收藏,制作整套选项可以做到:
贵了 使用 ajax 选项以获取一组匹配选项
一旦用户开始输入 :
ActiveAdmin.register Product do
filter(:category,
as: :searchable_select,
ajax: true)
end
如果输入属性对应 ActiveAdmin 资源,则它是
提供选项的 JSON 端点。 使用
页:1 searchable_select_options 定义所需方法
收集动作 :
ActiveAdmin.register Category do
searchable_select_options(scope: Category.all,
text_attribute: :name)
end
默认, scope 需要启用 Ransack 活动记录
用于确定哪些选项的收藏代理。 这个
属性 text_attribute 将用来获取显示名称
每个记录。 Via Ransack, 也用来通过搜索过滤
术语。 限制结果集大小会自动处理 .
您可以自定义显示文本 :
ActiveAdmin.register Category do
searchable_select_options(scope: Category.all,
text_attribute: :name,
display_text: ->(record) { "Category: #{record.name}" } )
end
请注意: text_attribute 仍然需要通过
兰萨克 你可以通过 filter 选项,以指定自己的
过滤策略 :
ActiveAdmin.register Category do
searchable_select_options(scope: Category.all,
text_attribute: :name,
filter: lambda |term, scope|
scope.ransack(name_cont_all: term.split(' ')).result
end)
end
scope 也可以是一种羊肉,在以下背景下加以评估:
帮助定义的收集动作 :
ActiveAdmin.register Category do
searchable_select_options(scope: -> { Category.allowed_for(current_user) },
text_attribute: :name)
end
如果输入属性设定在窗体对象上, ajax 则基于 可搜索选择将自动变成单一选项以确保 选定项目在选项之前正确显示 同步装入 .
指定选项端点资源
如果无法猜测提供选项终点的资源
基于输入属性名称,您可以通过一个
resource 键为 ajax 选项 :
ActiveAdmin.register Product do
form do |f|
f.input(:additional_category,
as: :searchable_select,
ajax: { resource: Category })
end
end
每个资源的多选项终点
单个 ActiveAdmin 资源可以定义多个选项端点:
ActiveAdmin.register Category do
searchable_select_options(name: :favorites,
scope: Category.favorites,
text_attribute: :name)
searchable_select_options(name: :recent,
scope: Category.recent,
text_attribute: :name)
end
要指定要使用的集合,请用
collection_name 键为 ajax 选项 :
ActiveAdmin.register Product do
form do |f|
f.input(:category,
as: :searchable_select,
ajax: { collection_name: :favorites })
end
end
查询多个属性
ActiveAdmin可搜索选择查询由兰萨克进行. 这样,你可以 将您的查询构建为可以同时查询多个属性的方式.
ActiveAdmin.register User do
searchable_select_options(scope: User.all,
text_attribute: :username,
filter: lambda do |term, scope|
scope.ransack(email_or_username_cont: term).result
end)
end
在这个例子中 all 范围将查询 email OR username。 。 。 .
您可以添加附加的有效载荷作为 dsl 选项 :
ActiveAdmin.register Category do
searchable_select_options(scope: Category.all,
text_attribute: :name,
additional_payload: ->(record) { { foo: record.bar } } )
end
使用额外负载的响应示例 :
{
"results": [{ "id": "1", "text": "Bicycles", "foo": "Bar" }],
"pagination": { "more": "false" }
}
通过参数
您可以通过附加参数到选项终点 :
ActiveAdmin.register Product do
form do |f|
f.input(:category,
as: :searchable_select,
ajax: {
params: {
some: 'value'
}
})
end
end
羊肉的经过是 scope 可以先接收这些参数
参数 :
ActiveAdmin.register Category do
searchable_select_options(scope: lambda do |params|
Category.find_all_by_some(params[:some])
end,
text_attribute: :name)
end
嵌入式资源路径选项
以下设置示例:
# Models
class OptionType < ActiveRecord::Base; end
class OptionValue < ActiveRecord::Base
belongs_to :option_type
end
class Product < ActiveRecord::Base
belongs_to :option_type
has_many :variants
end
class Variant < ActiveRecord::Base
belongs_to :product
belongs_to :option_value
end
# ActiveAdmin
ActiveAdmin.register(OptionType)
ActiveAdmin.register(Product)
ActiveAdmin.register(OptionValue) do
belongs_to :option_type
searchable_select_options(scope: lambda do |params|
OptionValue.where(
option_type_id: params[:option_type_id]
)
end,
text_attribute: :value)
end
有可能通过路径参数正确生成嵌入式资源的 URL path_params
ActiveAdmin.register(Variant) do
belongs_to :product
form do |f|
...
f.input(:option_value,
as: :searchable_select,
ajax: {
resource: OptionValue,
path_params: {
option_type_id: f.object.product.option_type_id
}
})
...
end
end
这将生成获取路径为 all_options_admin_option_type_option_values(option_type_id: f.object.product.option_type_id) (例如:. /admin/option_types/2/option_values/all_options(中文(简体) )
在特性测试中嵌入 Ajax 选项
写入 UI 驱动特性规格( 即与 Capybara) 时,
同步加载选定的选项可以增加测试
复杂. activeadmin-searchable_select 提供选项
将所有可用的选项与普通选择输入一样,同时
仍然执行相同的代码路径,包括 scope 财务报告和审定财务报表
text_attribute 处理.
例如使用 RSPEC/ Capybara, 简单设置 inline_ajax_options 真实
特性规格 :
RSpec.configure do |config|
config.before(:each) do |example|
ActiveAdmin::SearchableSelect.inline_ajax_options = (example.metadata[:type] == :feature)
end
end
传递选项到选择2
可以通过并定义配置选项来选择2
通过 data-attributes 使用嵌入式(子密钥)选项.
属性需要添加到 input_html 选项.
例如,您可以告诉Select2在用户之后等待多长时间
发送请求前已停止输入 :
...
f.input(:category,
as: :searchable_select,
ajax: true,
input_html: {
data: {
'ajax--delay' => 500
}
})
...
发展
要运行测试, 安装捆绑的宝石并引用 RSPEC :
$ bundle
$ bundle exec rspec
测试套房可以针对不同版本的"铁路"和"铁路"运行
活动管理员(参见 Appraisals 文件名 :
$ appraisal install
$ appraisal rspec
请确保修改符合样式指南 :
$ bundle exec rubocop
鸣谢
依据 fairburn/活动admin-select2。 。 。 .