首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

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

  1. 在Gemfile文件中添加ActiveAdmin的gem依赖:
代码语言:txt
复制
gem 'activeadmin'
  1. 执行bundle install命令安装依赖。
  2. 生成ActiveAdmin的配置文件和初始化文件:
代码语言:txt
复制
rails generate active_admin:install
  1. 生成需要的资源文件(例如Product资源):
代码语言:txt
复制
rails generate active_admin:resource Product
  1. 在生成的资源文件中定义动态下拉选择的逻辑。例如,如果想在选择一个产品分类后,动态更新产品品牌的选项,可以在app/admin/product.rb文件中添加如下代码:
代码语言:txt
复制
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)的选项。

  1. 创建一个路由用于处理动态更新品牌选项的请求。在config/routes.rb文件中添加如下代码:
代码语言:txt
复制
namespace :admin do
  resources :brands, only: [] do
    get 'options', on: :member
  end
end
  1. 在app/controllers/admin/brands_controller.rb文件中定义options动作来处理请求并返回动态更新的品牌选项:
代码语言:txt
复制
class Admin::BrandsController < Admin::BaseController
  def options
    category = Category.find(params[:id])
    brands = category.brands.pluck(:name, :id)
    render json: brands
  end
end
  1. 在界面中使用动态下拉选择。在ActiveAdmin的产品表单中,调用定义的动态下拉选择方法:
代码语言:txt
复制
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实现支持页面重载的动态下拉选择的步骤。通过上述代码,用户在选择产品分类后,品牌下拉菜单的选项会实时更新。具体的优势在于提升了用户体验和操作效率。

推荐的腾讯云产品:腾讯云服务器(云服务器),产品介绍链接地址:https://cloud.tencent.com/product/cvm

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 领券