如何在 AJAX“分页”视图中保持复选框选中状态？答案

【问题标题】：How to keep check box checked statuses in an AJAX "paginated" view?如何在 AJAX“分页”视图中保持复选框选中状态？
【发布时间】：2011-10-05 06:09:45
【问题描述】：

我正在使用 Ruby on Rails 3.1.0、jquery-rails 和 WillPaginate gems 来通过 AJAX 对项目进行分页。

我试图在 AJAX“分页”视图中保持复选框选中状态。也就是说，在一个视图中，它显示了一个项目列表，并且（出于性能原因 - 因为这些项目可能很多）对于那些它实现了分页（每页 10 个项目），因此具有如下输出：

# * `[ ]` represents a check box
# * `[X]` represents a checked check box
# * `Item<N>` represents a check box label
# * `Previous`, `Next`, `1`, `2`, `...` are WillPaginate links to switch
#    between pages

[X] Item1
[X] Item2
[X] Item3
[ ] Item4
[ ] ...
[ ] Item10

← Previous 1 2 3 Next →

通常，当用户单击Next 链接时，它会被加载并呈现（通过执行 AJAX HTTP GET 请求）下一页，包括接下来的 10 个项目。 我的问题是，如果用户检查了某些项目（比如 Item1、Item2、Item3 的状态为已检查）然后他\她切换页面这些已检查的项目状态丢失了。也就是说，当用户返回上一页时，Item1、Item2、Item3 不会被更多检查（因为我没有实现任何东西来保持它们的状态）。

我想在切换页面时保持检查状态。 我该怎么做？您建议使用什么方法（可能是 Ruby on Rails session...）？

【问题讨论】：

如何使用这些表单更新您的数据库？
@Sławosz - 由于问题中描述的场景旨在使用 new 记录（即在成功提交表单之前尚未在数据库中创建的记录)，我在我的控制器中运行一些代码，以便在创建该记录之后处理复选框参数（即，在考虑的当前类对象实例上运行 save 方法之后）。
所以也许隐藏输入（甚至每个页面的隐藏输入）来记住检查。您还需要它来保存表格。每次单击复选框都会解析隐藏的输入内容并进行更改。但是如果你有时间，使用 js MVC。

标签： javascript jquery ruby-on-rails ruby pagination

【解决方案1】：

当您离开页面时，您可以将页面的整个 DOM 树分配给一个数组项（以页码为键）。然后，当（如果）您的访问者返回该页面时，您可以将其直接从数组加载回 DOM，而无需 AJAX 请求，保持复选框不变并使页面更加快捷。

只要您的复选框的 onclick 侦听器位于比您要换出的内容更靠树的 DOM 节点上，这将正常工作。如果这没有任何意义，请查看事件冒泡 - 它很震撼！ :)

【讨论】：

这对我来说很有意义，但是您能否提供一个简单的示例实现来通过 JavaScript 分配以页码为键的项目数组？

【解决方案2】：

如果您的应用程序具有像这样更复杂的 UI，也许最好提供一些 javascript MVC 库，如 sproutcore 或骨干？然后每个复选框将是库内部存储的模型实例。

【讨论】：