翻页保持checkbox勾选状态的实现

超群.com — Wed, 20 Aug 2008 09:18:38 +0000

本博客所有原创文章采用知识共享署名-非商业性使用-相同方式共享，转载请保留链接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.

超群.com的博客 » checkbox

翻页保持checkbox勾选状态的实现