html - nested_form/cocoon：可以将表格行用于嵌套字段吗？

Question

我通常不使用表格作为表格，但是当有嵌套表格时（使用nested_form 或 cocoon gem 时），可以将每组表格元素放在表格行中吗？

对我来说，这似乎很直观：表中的每一行都代表一个对象。但是默认情况下，nested_form 和 cocoon gem 在他们的示例中都没有添加表格，所以我想知道使用表单是否不是最好的方法？

Answer 1

是的。如果您正在输入表格数据，那么您应该使用表格。

我尚未测试以下示例，但我认为它应该可以工作。假设您正在构建包含一堆行项目的收据，每个项目都有描述和价格。在您看来，请执行以下操作：

%table
  %thead
    %tr
      %th Description
      %th Price
  %tbody.line_items
    = f.simple_fields_for :line_items do |f|
      = render 'line_item_fields', f: f
.links
  = link_to_add_association "Add", f, :line_items, data: {"association-insertion-node" => "tbody.line_items", "association-insertion-method" => "append"}

Association-insertion-node：这控制插入新 line_item 的位置。在示例中，我使用表格主体。

Association-insertion-method：用于插入新 line_item 的 jQuery 方法。在示例中，我将其附加到表体的末尾。

在 _line_item_fields.html.haml 中：

%tr.nested-fields
  %td= f.input :description, label: false
  %td= f.input :price, label: false
  %td= link_to_remove_association "Remove"

.nested -fields类很重要，因为它告诉 cocoon 在单击“删除”链接时要删除哪个元素。