翻页保持checkbox勾选状态的实现
Wednesday, August 20th, 2008本博客所有原创文章采用知识共享署名-非商业性使用-相同方式共享，转载请保留链接http://chaoqun.17348.com/2008/08/pager_with_checkbox_on/ 之前的一个项目，给新浪空间做的音乐控件，大家可以登录上去看一下，个人感觉产品设计不错，我现在天天就在上面在线听音乐，大家可以测试一下里面的搜索效果，在搜索结果的第一页选择一些歌曲(或者全选)，然后翻任意页，再选，再翻任意页，再选，后头查一下你选择过了的页面，看看是不是你之前选择过的歌曲还保留着，下面就说一下这个的实现方式，javascript部分居于mootools。 实现原理： 每一个分页都包含在一个id为page+页码的div中，翻到其他页时，隐藏当前页，首先判断目标页是否已经加载过，如果没有就通过ajax去获取页面，同样包含在一个page+页面的div中，等于说所有的分页都在页面中，只不过非当前页的div都设为display=none了，所以细心的你可能会发现加载过的页面再加载怎么会那么快啊。 核心的部分就是这个javascript函数： // 显示分页，传进去分页页码 function show_search_page(page_num) { // 首先判断目标页是否已经加载过，加载过的话就把其他页都设定隐藏再把当前页显示，然后结束返回 if ($chk($('page'+page_num))) { $('song_div').getElements('div[id^=page]').each(function(item,index){$(item).setStyle('display','none');}); $('page'+page_num).setStyle('display','block'); return; } // 如果没有加载过，就通过ajax去获取页面数据，然后生成一个page+页面的div，并显示出来 var search_song_with_ajax = new Ajax('./getsearchdata.php?cur_page=' + page_num + '&key={_$search_key_}', {method: 'get', onComplete: function(){ $('song_div').getElements('div[id^=page]').each(function(item,index){$(item).setStyle('display','none');}); var new_div = new Element('div',{ 'id':'page'+page_num }); $(new_div).setHTML(this.response.text); $(new_div).injectInside('song_div'); } }).request(); } javascript的代码可以到页面去查看，hope it usefull for you.