支持页面重载的Rails 6 ActiveAdmin动态下拉选择

Rails 6是一种用于开发Web应用程序的开源框架，它基于Ruby语言。ActiveAdmin是Rails的一个开源插件，可以帮助开发者快速构建后台管理界面。

动态下拉选择是指在选择一个下拉菜单选项后，另一个下拉菜单的选项会随之发生变化。这种功能可以通过Rails 6的ActiveAdmin插件来实现，具体步骤如下：

在Gemfile文件中添加ActiveAdmin的gem依赖：

gem 'activeadmin'

执行bundle install命令安装依赖。
生成ActiveAdmin的配置文件和初始化文件：

rails generate active_admin:install

生成需要的资源文件（例如Product资源）：

rails generate active_admin:resource Product

在生成的资源文件中定义动态下拉选择的逻辑。例如，如果想在选择一个产品分类后，动态更新产品品牌的选项，可以在app/admin/product.rb文件中添加如下代码：

form do |f|
  f.inputs 'Product Details' do
    f.input :category, collection: Category.all.map{ |c| [c.name, c.id] }, prompt: 'Select category', input_html: { id: 'category_select' }
    f.input :brand, collection: proc { |product| Brand.where(category_id: product.category_id).map{ |b| [b.name, b.id] } }, prompt: 'Select brand', input_html: { id: 'brand_select' }
  end
  f.actions
end

# Ajax request to update brand options when category selection changes
script :javascript do
  <<-JS
    $(document).ready(function() {
      $('#category_select').on('change', function() {
        var categoryId = $(this).val();
        var url = '/admin/brands/' + categoryId + '/options'; // Replace with the actual URL to fetch brand options
        $.ajax({
          url: url,
          method: 'GET',
          success: function(data) {
            var options = data.map(function(option) {
              return '<option value="' + option[1] + '">' + option[0] + '</option>';
            });
            $('#brand_select').html(options.join(''));
          }
        });
      });
    });
  JS
end

上述代码中，collection参数用于指定下拉菜单的选项，prompt参数用于设置默认的提示选项，input_html参数用于设置下拉菜单的HTML属性。通过jQuery的ajax方法，监听第一个下拉菜单（category）的变化，并发送异步请求获取动态更新的第二个下拉菜单（brand）的选项。

创建一个路由用于处理动态更新品牌选项的请求。在config/routes.rb文件中添加如下代码：

namespace :admin do
  resources :brands, only: [] do
    get 'options', on: :member
  end
end

在app/controllers/admin/brands_controller.rb文件中定义options动作来处理请求并返回动态更新的品牌选项：

class Admin::BrandsController < Admin::BaseController
  def options
    category = Category.find(params[:id])
    brands = category.brands.pluck(:name, :id)
    render json: brands
  end
end

在界面中使用动态下拉选择。在ActiveAdmin的产品表单中，调用定义的动态下拉选择方法：

form do |f|
  f.inputs 'Product Details' do
    f.input :category, collection: Category.all.map{ |c| [c.name, c.id] }, prompt: 'Select category', input_html: { id: 'category_select' }
    f.input :brand, collection: proc { |product| Brand.where(category_id: product.category_id).map{ |b| [b.name, b.id] } }, prompt: 'Select brand', input_html: { id: 'brand_select' }
  end
  f.actions
end

以上就是使用Rails 6 ActiveAdmin实现支持页面重载的动态下拉选择的步骤。通过上述代码，用户在选择产品分类后，品牌下拉菜单的选项会实时更新。具体的优势在于提升了用户体验和操作效率。

支持页面重载的Rails 6 ActiveAdmin动态下拉选择

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐