记住跨页面选中的复选框 - 最好的方法是什么?

2021-12-23 00:00:00 checkbox php javascript

我需要添加类似于 Gmail 的功能，其中项目列表上的复选框会在多个结果页面以及离开和返回结果时记住.我想弄清楚的是最好的方法.我正在使用 PHP，可能还有 jQuery.

I'm needing to add functionality similar to Gmail where the checkboxes on a list of items is remembered across multiple pages of results and when going away and coming back to the result. What I'm trying to figure out is the best way of doing this. I'm using PHP and likely jQuery.

我的第一个想法是向每个复选框添加一个 onClick，以触发 AJAX 调用返回服务器，该服务器将 id 存储在会话中的数组中.每次加载项目列表时，系统都会检查该行是否被选中，并在必要时选中复选框.为了可靠性，在检查到服务器的请求是否无法完成(连接问题、服务器错误等)后，将取消选中该复选框，并尽可能快地发出请求.

My first thought is to add an onClick to each checkbox that triggers an AJAX call back to the server which stores the id in an array in the session. Each time a list of items is loaded, the system would check to see if the row is checked and check the checkbox if necessary. For reliability, the checkbox would be unchecked after checking if the request to the server cannot be completed (connection problem, server error, etc) and the request would be made as quick as absolutely possible.

这听起来都不错，除了一些项目:

This sounds all good, except for a few items:

  • 检查所有:会发生什么?它是否向服务器发送 30 个(默认页面项目)请求?或者我是否删除所有 onClicks，选中复选框，向服务器发送包含所有 id 的请求，然后重新添加 onClicks?或者...?取消选中所有类似的问题.
  • 速度:如果 100 多位用户一直在检查和取消检查，可能会开始出现问题
  • 浏览器速度:我认为最好在页面加载后使用 JS 添加 onClick，如果一个页面上有 500 个或更多项目，我认为这可能需要一两秒钟.全部检查会成为一个更大的问题.

过去我没有找到一种可靠的方法来检测用户何时离开页面.如果有可靠的方法，那么我可以将其视为一个选项，因此它只会在每个页面卸载时进行记录.

In the past I haven't found a reliable way to detect when the user leaves a page. If there is a reliable way, then I could see this being an option so it just records on each page unload.

是否有其他解决方案或更好的方法?

Are there any other solutions or better methods?

如Eran Galperin，check all 方法只需要检查每个复选框，然后对所有行进行 ajax 调用.无需删除 onClick.

As mentioned by Eran Galperin, the check all method would only need to check each of the checkboxes and then make an ajax call with all of the rows. No need to remove the onClick.

另外，看起来事件委托方法是个好主意——会让事情变得更容易.

Also, it looks like the Event Delegation method is a good idea—would make things a lot easier.

推荐答案

  1. 当您以编程方式更改复选框的选中状态时，不会触发 onclick 事件.当用户点击全选/取消全选链接时，您可以发送不同的 AJAX 请求，而不必担心附加到各个复选框的点击事件.
  2. 这是使用每次点击请求时的权衡.或者，使用保存"按钮来保存整个表单.
  3. 使用事件委托 - 附加一次点击事件到包含所有复选框的整个容器，并检查事件的目标以查看是否单击了复选框.另外，我个人会避免在同一页面上显示 500 个不同的选项.如果绝对需要有这么多选项，请将它们分解为多个区域/页面.
  1. An onclick event won't trigger when you programmaticaly change the checked status of a checkbox. You can send a different AJAX request when a user clicks the check all / uncheckall link, without worrying about the click events you attached to individual checkboxes.
  2. This is the tradeoff when using a request per click. Alternatively use a "Save" button that saves the entire form.
  3. Use event delegation - attach one onclick event to the entire container that holds all the checkboxes, and check the target of the event to see if a checkbox was clicked. Also, personally I would avoid showing 500 different options on the same page. If absolutely necessary to have so many options, break them down into several zones / pages.

对于离开页面的用户，您可以使用 onbeforeonload事件，但是如果浏览器崩溃或以其他方式不正常退出，它将不会被捕获.根据捕获用户更改的关键程度来使用它.

For a user leaving the page you can use the onbeforeonload event, however if the browser crashes or otherwise exits ungracefully it will not be caught. Use it depending on how critical is it to be able to capture user changes.

相关文章