問題描述
我需要添加類似于 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.
推薦答案
- 當您以編程方式更改復選框的選中狀態時，不會觸發 onclick 事件.當用戶點擊全選/取消全選鏈接時，您可以發送不同的 AJAX 請求，而不必擔心附加到各個復選框的點擊事件.
- 這是使用每次點擊請求時的權衡.或者，使用保存"按鈕來保存整個表單.
- 使用事件委托 - 附加一次點擊事件到包含所有復選框的整個容器，并檢查事件的目標以查看是否單擊了復選框.另外，我個人會避免在同一頁面上顯示 500 個不同的選項.如果絕對需要有這么多選項，請將它們分解為多個區域/頁面.
- 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.
- This is the tradeoff when using a request per click. Alternatively use a "Save" button that saves the entire form.
- 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.
這篇關于記住跨頁面選中的復選框 - 最好的方法是什么?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！