嵌套表格（设计问题）

Question

我有一个显示在我页面上的项目列表。

1. 项目A [编辑]
2. 项目B [编辑]
3. 项目C [编辑]

每个项目都可编辑当您单击编辑图标时。 编辑表单显示ajax调用，控制器返回一个表单。

1. 编辑项目A [保存]
的表单
2. 项目B [编辑]
3. 项目C [编辑]

但是所有列表都是批量可编辑的，因此每个项目旁边都有一个复选框。

1. [cb]项目A [编辑]
2. [cb]项目B [编辑]
3. [cb]项目C [编辑]

表格就在附近。

的form_tag 1. [cb]项目A [编辑] 2. [cb]项目B [编辑] 3. [cb]项目C [编辑] 操作：选择操作[批量编辑] 端

所以当我点击一个项目编辑按钮时，由于返回了一个表单，我有两个嵌套的表单。 所有代码都中断了。

我能做什么，所以我没有围绕所有项目的批量编辑表格，最后是2个嵌套表格？

谢谢， 迈克尔。

Answer 1

我使用javascript解决了我的问题。加载编辑表单时，提交按钮不提交表单，但调用Ajax请求将表单参数发送到正确的URL。

Answer 2

你不能拥有嵌套表单......事实上，如果你尝试验证，你将会遇到一个大而丑陋的HTML错误。

问题的解决方案我认为是这样的：当您发出ajax请求并返回编辑表单时，您可以在html的末尾注入代码并将其显示到模态窗口中（我这样做了几个月前的一个项目。）

然而，我不知道RoR是如何工作的，所以这只是一个想法：P

Answer 3

您可以通过CSS的强大功能来解决它​​，并使其看起来好像表单是嵌套的......但实际上它们并非如此。

从我有限的CSS知识中，最好留给前端工程师或Google。

Answer 4

您可以突出显示所选行并在其上绑定“click”事件，以便您可以将行切换为选中/未选中。然后，当单击提交时，您只需提交类“hilight”的行。

你可以不用复选框，使结构如下：     ...     ...     ..等

然后使用jquery，您可以在它们上绑定click事件，例如：

$('.checked').click(function(e) {
    $(this).toggleClass('hilight');
});