分页操作时,点击上一页或下一页,当返回到指定页面时,该页面被选择的复选框任然被勾中

思路:如果把当前勾选的checkbox对应的数据保存在数组或拼接字符串中,上一页或下一页会刷新页面,保存的值就没了,不能达到刷新页面我们保存的数据依然存在

因此我们可以把相应的数据保存在cookie中,只要浏览器不关闭,我们保存的数据就会存在,可以解决浏览器刷新数据丢失的问题。


解决办法:每一个uid对应唯一的checkbox,当我们选中checkbox时我们就把 这个uid保存在cookie中,取消选中的时候remove掉cookie中的对应uid,当点击上一页或下一页时,在window 窗体onload的时候 获取当前页面的所有checkbox后的uid属性值 array1。通过js的字符串操作把cookie中长的uid转换成数组中array2。通过二次循环,把array1中的每一项和array中的每一项相比较。如果相等。这把this.checked=true(既通过js主动勾选复选框)


页面:

               <volist name="data.tlist" id="vo" key="k">
                <tr class="d_list  <eq name='vo.is_yu' value='1'>error_list</eq>" data-did="{$vo.uid}">
                <td><input type="checkbox" class="mycheckbox"  uid='{$vo.uid}'/></td>
                <td>{$vo.nickname}</td>
                <td>{$vo.uid}({$vo.str_vd})</td>
                <td>{$vo.dtype}</td>
                <td>{$vo.str_level}</td>
                <td>{$vo.price}</td>
                <td>{$vo.separate}%</td>
                <td><eq name="vo.is_bond" value="0">未代缴<else/>已代缴</eq></td>
                <td>{$vo.now_pro}</td>
                <td>{$vo.xwscore}</td>
                <td>{$vo.com_num}</td>
                <td>{$vo.fire_num}</td>
                <td>{$vo.thr_num}</td>
                <td>{$vo.ord_num}</td>
               </tr>
               </volist>


js:  cookie 操作

   //得到选中复选框值
    function theSubmit(){
     var checkIds = GetCookie("ArticleId");
     alert('提交'+checkIds);
    }
     
    function SetArticleId(o, i) { 
       if (o.checked) {
        AddCookie(i)
      }
      else {
        RemoveCookie(i)
      } 
    }
     
    function SetCookie(name, value) {
      document.cookie = name + "=" + escape(value); 
    }
    function GetCookie(name) {
      if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(name + "=");
        if (c_start != -1) {
          c_start = c_start + name.length + 1;
          c_end = document.cookie.indexOf(";", c_start);
          if (c_end == -1) c_end = document.cookie.length;
          return unescape(document.cookie.substring(c_start, c_end));
        }
      }
      return "";
    }
    function AddCookie(i) {
      d = GetCookie("ArticleId");
      if (d == "") d = "|";
      if (d.indexOf("|" + i + "|") == -1) {
            d += i + "|";
            SetCookie("ArticleId", d);
      } 
    }
  
    function RemoveCookie(i) {
      d = GetCookie("ArticleId");
      var reg = new RegExp("\\|" + i + "\\|");
      if (reg.test(d)) {
        d = d.replace(reg, "|");  
        SetCookie("ArticleId", d);
      }     
    } 
    
    $('.mycheckbox').click(function(){
    var uid=$(this).attr('uid');
    SetArticleId(this,uid)
    })
    
    $('.sure_applay').click(function(){
    theSubmit();
    })
    
    /***页面获取的uid和cookie中获取的uid对比,相等 通过js主动勾选复选框**/
    window.οnlοad=function(){
    var d = GetCookie("ArticleId");
      if (d != ""){
      var str=d.substring(1,d.length-1);
      var arry=str.split('|');
      $('.mycheckbox').each(function(i,item){
      var uid=parseInt($(item).attr('uid'));
      for(var i=0;i<arry.length;i++){
      var did=parseInt(arry[i]);
      if(uid==did){
      $(item)[0].checked=true;
      }
      }
      })
     
      }
    }
})(jQuery);


注:该案例中cookie的value值为字符串,本想打算通过js实现一个map 把uid存入到map中。cookie的value中保存map(对象),不知道能否行的通。

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值