如何在ActiveAdmin索引页下方显示新资源表单？

Question

客户请求将 ActiveAdmin“新资源”表单显示在 index_as_table 下方，以便能够在创建新行时引用现有行。我以为我应该能做到

form partial: 'form'

index do 
  ...   
  div id: "new_resource" do
    render partial: 'form', locals: { resource: User.new }
  end
end

但是，这会导致表单和 HTML 看起来不完整，表单字段甚至没有嵌套在表单元素内。

Answer 1

创建我自己的索引模板并重新创建现有索引模板的所有出色功能，只是为了在表单下方插入一些 HTML，这似乎太过分了。

这是我采用的解决方案：

将以下内容添加到 active_admin.js：

$(document).ready(function() {

  // check if we're on the resource index page, if so, move the form div below the table
  // and fix the issue where form fields are not inside the form tag
  if ($('.index_as_table').length) {
    old_content = $('#new_resource').detach();
    form = old_content.find('form').detach();
    // Add a headline to the form, then nest the form fields
    form.prepend('<h2>Add New User</h2>');
    form.append(old_content);
    // Place it all below the pagination of the index table
    form.appendTo('#main_content');
    form.css('margin-top', '30px');
  }
});