今天有人问我怎么在分页当中,附带数据列表中的复选框选择状态。需求是这样的,在切换分页的时候,第一页有N个已经是被选中,再从另一个页切换回来时,还可以看到先前的选择状态。明白了需求,下面我们开始写代码:
下面的a,b两个变量本应该是通过一些JS的处理取得页面的复选框数组值 ,现在的数值是模拟来的。b变量应该在调用tabPage时去获得。我在这里只是为提供一个思路,下面的大家自由来发挥
//取得当前页面列表复选框的所有值,临时空间变量
var a=[1,2,3,4,5,6,7,10,12];
//取得当前页面选中的复选框所有值,昨临时变量
var b=[3,4,5,6];
//保存所有的页面选中值,c的值是需要经过后台的交互处理传递
var c=[3,4,5,6,7];
//上一次操作本页面选中的值及其遍历选中状态 <一, 进入此页面时需要执行的遍历>
function ergodicSelected(a,c){
//当前页的遍历后所选中的值
var currSe=[];
for(var i=0;i<c.length;i++){
var index=$.inArray(c[i],a);
if(index>-1){
var val= a[index];
//alert(val);
//比对value属性值等于val的为选中状态
$("input[name=\'item\'][value=\'"+val+"\']").attr('checked',true);
currSe.push(val);
}
}
return currSe;
}
var prevCheck=ergodicSelected(a,c);
/*
delHaveValue(arr1,arr2)
判断arr1 是否存在于arr2中,如果存在则从arr2中删除相同的索引键值
*/
function delHaveValue(arr1,arr2){
for(var j=0;j<arr1.length;j++){
var index=$.inArray(arr1[j],arr2);
if(index>-1){
//alert(index);
arr2.splice(index,1);
}
}
return arr2;
}
//<二>触发点击切换页时需要做的处理,调用tabPage 返回的是最包括当前页和其他页最新的选择中的状态值。在触动切换页码时,可以把此值向后台PUSH
function tabPage(){
//b应该是在调有此方法时,从页面中获得的
//向C中放值
for(var j=0;i<b.length;j++){
var index=$.inArray(b[j],c);
if(index>-1){
c.push(b[i]);
}
}
//比较当前选中状态的值 ,和从后台传过来当前状态值的差别
//var prevCheck=ergodicSelected(a,c);
var delValue=delHaveValue(b,prevCheck);
return delHaveValue(delValue,c);
}
/*
如果在分页的当中,上面有查询条件,根据查询的结果我们进行了复选框的选择。默认情况下我们不去添加搜索条件,在后台当中接收到的FORM 表单值 不变。在后台我们有一个临时变量对象,用以保存form表单值 的状态。每次请求controller时我们就做一次比对,看是否临时变量值 和新得到的form表单值 是否有变化。如果有变化了,存储复选框选中的数组我们就给初始化为空。否则临时存储form表单的对象不变
*/