[英]Activeadmin form select dropdown update
我有一個類別 Model 和一個子類別 Model 和 id 像子類別 select 輸入以刷新取決於我選擇的特定類別的子類別。
form do |f|
f.inputs do
f.input :title
f.input :category, as: :select, collection: Category.all, :input_html => { :class => 'chzn-select', :width => 'auto', "data-placeholder" => 'Click' }
f.input :sub_category, as: :select, collection: SubCategory.all, :input_html => { :class => 'chzn-select', :width => 'auto', "data-placeholder" => 'Click' }
end
f.actions
end
為此,您可以使用相關選擇。 示例在此處給出
活躍管理員
ActiveAdmin.register CatalogsProduct do
form do |f|
f.inputs "Details" do
f.input :product, :as => :select, :collection => Product.all.collect {|product| [product.name, product.id] }
f.input :catalog, :as => :select, :input_html => {'data-option-dependent' => true, 'data-option-url' => '/products/:catalogs_product_product_id/catalogs', 'data-option-observed' => 'catalogs_product_product_id'}, :collection => (resource.product ? resource.product.category.catalogs.collect {|catalog| [catalog.attr_name, catalog.id]} : [])
end
f.actions
end
end
目錄控制器
class CatalogsController < ApplicationController
respond_to :json
def index
if params[:product_id]
product = Product.find_by_id(params[:product_id])
@catalogs = product.category.catalogs
else
@catalogs = Catalog.all
end
render :json => @catalogs.collect {|catalog| {:id => catalog.id, :name => catalog.attr_name} }
end
end
您必須在 ActiveAdmin 類別模型中創建一個成員操作(方法:GET,參數:所選類別的 id),返回屬於所選類別的子類別(例如,在 json 中):
https://github.com/activeadmin/activeadmin/blob/master/docs/8-custom-actions.md#member-actions
您必須使用帶有 ajax 的 jQuery(例如),當 Category 選擇輸入已更改時,它會填充 SubCategory 選擇輸入:
使用帶有 Json 數據的 Javascript/Jquery 填充選擇框選項https://forum.jquery.com/topic/best-practices-for-populating-selects-with-ajax
你可以做這樣的事情來添加特定的選擇
form do |f|
f.inputs do
f.input :category , :as => :select, collection: (['conversion','double-bar', 'fixed-hybrid','removal-bar-over-denture', 'surgical-guides'])
end
actions
end
你可以應用這一點,我通過將游戲與類別和子類別相關聯來做到這一點。 在 Rails 6.0.4 和 Active Admin 2.9.0 上使用 Ruby。
楷模
class Game < ApplicationRecord
belongs_to :category
belongs_to :sub_category
end
class Category < ApplicationRecord
has_many :sub_categories
end
class SubCategory < ApplicationRecord
belongs_to :category
end
活動管理表格
ActiveAdmin.register Game do
form do |f|
f.inputs "Details" do
f.input :category_id, as: :select, collection: Category.all
f.input :sub_category_id, as: :select, collection: ([]) # The input is initialized without values
end
f.actions
end
end
您必須執行以下操作:
創建一個返回子類別的 controller。
class SubCategoriesController < ApplicationController def sub_category_filter if params[:category_id] category = Category.find(params[:category_id]) @sub_categories = category.sub_categories else @sub_categories = [] end render:json => @sub_categories.collect {|sub_category| {:id => sub_category.id, :name => sub_category.name} } end end
在routes.rb
文件中添加路由。
get 'sub_category_filter/' => 'sub_category#sub_category_filter'
Inspect with your web browser console your selects, and use a CSS selector to create a jQuery object for the category select, something like:
$('#game_category_id')
在文件/app/assets/javascripts/active_admin.js
中添加這段代碼,該文件負責調用生成的 controller,並添加它返回的選項。
//= require active_admin/base $(function () { $('#game_category_id').on('change', function () { $('#game_sub_category_id option').remove(); // Remove all <option> child tags. $.getJSON(`/sub_category_filter`, {category_id: $(this).val()}, function(result){ // Documentation on getJSON: http://api.jquery.com/jQuery.getJSON/ $.each(result, function (i, item) { // Iterates through a collection $('#game_sub_category_id').append($('<option>', { // Append an object to the inside of the select box value: item.id, text: item.name })); }); }); }) })
參考:
在我的依賴 select 在 Active Admin 下拉菜單中找不到錯誤(Rails 3.2,Active Admin 1.0)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.