ruby-on-rails - Rails - ActiveAdmin - 自定义表单将 has_many 关系显示为表

Question

我需要您的帮助，为 activeadmin - rails 中的新对象创建自定义表单。我当前的解决方案如下所示。

嵌套属性“Belegung”是一个 has_many 关联:这就是我的表单的样子

form do |f|
f.inputs "Hardware Details" do
  f.input :serial_nr, :label => "Seriennummer:"
  f.input :name, :label => "Name:"
  f.input :hardware_type, :label => "Typ:"
  f.input :location_id, :label => "Standort", as: :select, collection: Location.where(client_id: current_user.client_id)
  f.input :hardware_spec_id, :label => "Hardware-Spezifikation", as: :select, collection: HardwareSpec.all.map{ |h| [h.hardware_type, h.id] }
end
f.inputs "Belegung:" do # Makes a panel that holds inputs for a location id
  f.has_many :assignments, :heading => false do |cf|
    cf.input :row, :label => "Reihe:"
    cf.input :column, :label => "Spalte:"
    cf.input :product_id, :label => "Produkt", as: :select, collection: Product.where(client_id: current_user.client_id)
  end
end
f.actions

结束

我想创建一个具有固定行数和列数的表格。在每个单元格中，我希望有类似的东西:

for 1.. 10 do
    tr
      for 1..3
         cf.input :row = "current_row"
         cf.input :column = "current_column"
         cf.input :product_id .....

希望对你有所帮助。谢谢。

编辑:

好的，我试过一些 jquery/haml 代码，现在，我的当前结果如下所示。

我的自定义 View “html.haml”文件如下所示

= semantic_form_for [:admin, @hardware], :builder => ActiveAdmin::FormBuilder do |f|


- f.inputs "Hardware" do
    - f.input :name
    - f.input :serial_nr
    - f.input :hardware_type, :label => "Typ:"
    - f.input :location_id, :label => "Standort", as: :select, collection: Location.where(client_id: current_user.client_id)
    - f.input :hardware_spec_id, :label => "Hardware-Spezifikation", as: :select, collection: HardwareSpec.all.map{ |h| [h.hardware_type, h.id] }
  - f.inputs "Belegung" do
    #assignments
  = f.actions

:javascript



    $('#hardware_hardware_spec_id').change(function(){
          //clear conent
          $('#assignments').empty();
          var id = $('#hardware_hardware_spec_id').val();
          if(id != ""

){
        var root = window.location.protocol + '//' + window.location.host;

    var spec_url = root+"/admin/hardware_specs/"+id;
    $.ajax({
      dataType: "json",
      type: "get",
      url: spec_url,
      timeout: 5000
    }).done(function(response){
        var rows = response.hardware_spec.rows;
        var columns = response.hardware_spec.columns;

        var table = $('<table></table>').addClass('foo');
        //Überschriften
        var title = $('<tr></tr>')
        var title2 = $('<th></th>');
        title.append(title2);
        for (i = 0; i < columns; i++) {
            var title1 = $('<th></th>').text('Spalte ' + i);
            table.append(title);
            title.append(title1);
        }
        for (j = 0; j < rows; j++) {
                var row_header = $('<th></th>').text('Reihe ' + j);
                row = $('<tr></tr>');
                row.append(row_header);
                for (i = 0; i < columns; i++) {
                    var input = $('<select></select>');
                    if(input.prop) {
                      var options = input.prop('options');
                    }
                    else {
                      var options = input.attr('options');
                    }

                    var products = #{Product.where(client_id: current_user.client_id).to_json.html_safe};
                    $.each(products, function(id, product){
                       options[options.length] = new Option(product.description, id);
                    });
                    var row1 = $('<td></td>');
                    row1.append(input)
                    row.append(row1);
                    table.append(row);

                }
         }

        if ($('table').length) {
             $("#assignments tr:first").after(row);
        }
        else {
            $('#assignments').append(table);
        }
    });
  }

});

我需要做的最后一件事是创建具有嵌套属性(“serial_nr，“name”，assignments => [row，column，product_id]”)的模型(“hardware”)，就像上面的表格一样。谢谢

Answer 1

好的，现在我通过执行以下步骤解决了我的问题:

1. 渲染部分

   ActiveAdmin.register 模型做

   form :partial => 'customform'

2. 在“/app/views/admin/model/”中创建文件“_customform.html.haml”

3. 在您的 Haml 文件中，您可以将 html 标签与 haml 代码结合起来。因此，如果您在 formtastic-formbuilder 中使用 has_many 关系时遇到问题，您可以创建具有以下“id”和“name”类型的 HTML 输入标签。

例如:

= semantic_form_for [:admin, @parent], :builder => ActiveAdmin::FormBuilder do |f|


- f.inputs "Parent" do
    - f.input :name, :required => true
    - f.input :serial_nr, :required => true
    - f.input :location_id, :required => true, :label => "Standort", as: :select, collection: Location.where(client_id: current_user.client_id)
    - (0..5).each do |row|
      %input{:id=>"parent_childrens_attributes_#{row}_attribute", :name=>"parent[childrens_attributes][#{row}][attribute]"}

诀窍在于输入标签中的“id”和名称“definition”。现在您可以轻松创建自定义 View 并结合 formtastic 和 html/haml 代码。

或者您可以传递其他模型对象。您只需覆盖管理 Controller 中的"new"或“编辑”功能即可。

def new
  @example = Example.where(..)
  new!
end

在你的表单中:

 @example.each do |row|
  %input{:id=>"parent_childrens_attributes_#{row}_attribute", :name=>"parent[childrens_attributes][#{row}][attribute]"}

希望这可以帮助其他人在 activeadmin 中创建不同的自定义表单。