nested_form / cocoon：可以使用嵌套字段的表格行吗？ [英] nested_form/cocoon: is it okay to use table rows for nested fields?

问题描述

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

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

是。如果你输入的是表格数据，那么你应该使用一个表。

我没有测试过下面的例子，但我认为它应该可以工作。假设您正在制作包含一系列订单项的收据，每个订单项都有说明和价格。在你看来：

 ％表
％thead 
％tr 
％th描述
％th价格
％tbody.line_items 
 = f.simple_fields_for：line_items do | f | 
 = render'line_item_fields'，f：f 
 .links 
 = link_to_add_associationAdd，f：：line_items，data：{association-insertion-node=> tbody.line_items，关联插入方法=> append} 
  

关联插入节点插入新的line_item。在示例中，我使用表体。

关联插入方法：用于插入新的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删除
  

.nested-fields 类是非常重要的，因为它告诉Cocoon单击删除链接时删除哪个元素。

I normally don't use tables for forms, but when having a nested form (when using nested_form or cocoon gem), is it okay then to put each set of form elements inside a table row?

To me, this seems pretty intuitive: every row in the table represents an object. But neither the nested_form nor the cocoon gem add tables in their examples by default, so I wonder whether using forms isn't the best way to go?

解决方案

Yes. If you are inputting tabular data then you should use a table.

I haven't tested the following examples but I think it should work. Assuming you are building a receipt with a bunch of line items, each with a description and price. In your view do:

%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: This controls where to insert the new line_item. In the example I use the table body.

association-insertion-method: The jQuery method used to insert the new line_item. In the example I append it to the end of the table body.

In _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"

The .nested-fields class is important as it tells cocoon which element to delete when the "Remove" link is clicked.

这篇关于nested_form / cocoon：可以使用嵌套字段的表格行吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！