Jquery数据表切断茧隐藏输入

Posted 2023-05-09

【中文标题】Jquery数据表切断茧隐藏输入

【英文标题】：Jquery datatables lopping off cocoon hidden input

【发布时间】：2016-02-03 01:50:19

【问题描述】：

我有一个包含一组动态字段的应用。这些字段是使用 cocoon 生成的，并使用 jquery 数据表进行样式设置。为了确定任何一组字段的 id，cocoon 显然在包含字段的元素之外放置了一个隐藏输入，如下所示：

<tr class="nested-fields stockholder">
    <td class="cell stockholder"></td>
    <td class="cell issue_date"></td>
    <td class="cell shares_issued"></td>
    <td class="cell shares_repurchased"></td>
    <td class="cell shares_canceled"></td>
    <td class="cell shares_outstanding"></td>
    <td class="cell edit"></td>
</tr>
<input id="security_stockholders_attributes_0_id" type="hidden" name="security[stockholders_attributes][0][id]" value="1">

注意输入在<tr>之外

在最近将数据表升级到 1.10.9 时，我注意到数据表开始删除 cocoon 的隐藏（稍微不合适）输入元素，导致表单功能非常混乱，原因很明显。

我的问题：有没有...

一种方法来指定这个输入元素的位置？就目前而言，我通过以下方式自定义了我的link_to_add_association：

<%= link_to_add_association 'Add Stockholder', security, :stockholders, :"data-association-insertion-node" => "table#captable", :"data-association-insertion-method" => "append", class: "btn btn-default add-button"  %>

或

一种让 jquery 数据表容忍此特定元素放置的方法？

非常感谢您的任何想法！

更新：看来我可以在事后编辑 dom 并将隐藏的输入移动到表格单元格中，所以看起来我可能有一个丑陋的解决方案javascript 如果一切都失败了。

【参考方案1】：

好的，找到解决方法了。

这个问题实际上与 cocoon 没有太大关系，因为它与 cocoon 作为部分添加的基本 fields_for 有很大关系。基本上，fields_for 默认包含 id 作为隐藏的input。但是有一个选项可以隐藏隐藏的 id 输入。我需要做的就是：

在我的simple_fields_for 中添加选项include_id: false 在<td>s 之一中添加一个隐藏的输入作为id 所以：<%= f.input :id, as: :hidden %>

更多信息可以在here找到。