思路:如果把当前勾选的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.onload=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(对象),不知道能否行的通。