HTML复选框分页记忆功能,SpringMVC和JS一起实现checkbox翻页后保持已选中状态

1.技术：kkpager分页插件(仅是个人分页方法，详情技术请查阅相关资料，当然，还有很多其他分页方法)，SpringMVC，JS,

AJAX，Json，session

2.思路：​

1>.前端页面声明一个全局变量，用来存放所有已选中的checkbox的ID，用逗号拼接，ID可以设为后台传到前端的对象的ID，易于区分checkbox。

2>.第一次进入此页面时，调用后台方法，生成一个session，里面放一个map，map用来放checkbox的ID，由分页函数进入第一页时，直接取session。

3>.每次点击某个checkbox，调用后台方法，根据是选中还是未选中再决定是往map里存放还是删除，最后遍历map里的ID，实时更新全局变量的值。

4>.每次翻页，对​全局变量进行处理，以逗号分离放到数组中，遍历数组中的checkbox的ID，查看翻页后是否有某些checkbox已被选中，若有，则设为已选中状态。

3.实现：

1>.首先在前端页面需要声明一个全局变量checkedIds，存放已被选中的checkbox的ID，ID可以设为后台传到前端的对象的ID【唯一性】，易于区分checkbox；

var checkedIds = "";

2>.在显示数据函数里的AJAX中多传一个参数，ehter，enter判断是进入此页面看到的第一页还是由分页函数进入的第一页【刷新页面看到的第一页和由分页函数进入的第一页调用方法不一样】，再决定是生成一个session还是直接取session，session里放一个map,map用来放checkbox的ID。

前端JSP：

(1)页面加载

$(function() {

//页面初始化，触发显示数据的事件

findResource();

});

(2)JS函数，动态生成表格的行与列

function

findResources(){​

var pageNo

=1;//当前页

var lineSize

=1;//每页数

var totalRecords

=1;//总条数

var totalPage

=1;//总页数

//页面加载时，调用此AJAX，生成第一页。

$.ajax({

url: "

data:{

"currentPage" : 1,

"enter" : "1",

},

dataType:"json",

type:"post",

async:false,

success: function(data){

$("#tbody").html("");//tbody表格动态生成前先空处理

pageNo =

data.currentPage;//当前页

lineSize =

data.lineSize;//每页数

totalRecords =

data.totalRecords;//总条数

totalPage =

Math.ceil(totalRecords/lineSize);//总页数

var t =

data.tmanagerResource;//后台传到前端的对象

......//后台传到前端的其他值

if(t.length > 0){

for循环遍历对象值

var findManagerResource=

.......//JS动态生成tbody表格的行列

......//动态生成checkbox，并加上id、value和触发事件 value="'+t[i].id+'"  οnclick="selected(this)"

id="'+t[i].id+'"

......//其他动态生成的表格的行

$("#tbody").append(findManagerResource);

}

}

});

pageTurnCheck();//进入每页时都会调用的方法，就是让已被选中的那些checkbox保持已选中状态。

//分页函数

kkpager.generPageHtml({

pno : pageNo,

//总页码

total : totalPage,

//总数据条数

totalRecords : totalRecords,

mode :

'click',//默认值是link，可选link或者click

click : function(n,tot) {

$("#tbody").html("");//tbody表格动态生成前先空处理

$.ajax({

url:

"目标地址/目标controller/findResource",

data:{

"currentPage" : n,

"enter" :

"2",

},

dataType:"json",

type:"post",

async:false,

success: function(data){

pageNo = data.currentPage;//当前页

lineSize =

data.lineSize;//每页数

totalRecords =

data.totalRecords;//总条数

totalPage =

Math.ceil(totalRecords/lineSize);//总页数

var t =

data.tmanagerResource;//后台传到前端的对象

......//后台传到前端的其他值

if(t.length > 0){

for循环遍历对象值

var

findManagerResource=

.......//JS动态生成tbody表格的行列

......//动态生成checkbox，并加上id、value和触发事件 value="'+t[i].id+'"  οnclick="selected(this)"

id="'+t[i].id+'"

......//其他动态生成的表格的行

$("#tbody").append(findManagerResource);

}

}

});

pageTurnCheck();//进入每页时都会调用的方法，就是让已被选中的那些checkbox保持已选中状态。

//手动选中按钮

var

tot = totalPage;

this.selectPage(n,tot);

}

});

}

(3)tbody表格

​

编写一个表格，有首行thead和主体tbody，tbody的id为tbody。

​后台Controller：

​@RequestMapping(value =

"/findResource",method = RequestMethod.POST)

@ResponseBody

public Map

findResource(HttpServletRequest request,int currentPage,String

enter) {

log.info("--------------分页查询ManagerResource所有数据------------------");

......//各种参数

String ids =

"";//存放已选中的checkbox的全局变量

try {

if(enter.equals("1") &&

arrFirst.size()==0){

//1代表第一次进入此页面或刷新页面看到的第一页，2代表由分页函数进入的第一页。前者需要生成一个session,后者直接拿session来用。

Map checkMap = new HashMap();

//存放session，命名为resource_session,注意：每个模块定义用于存放checkbox的session的名字必须不同

request.getSession().setAttribute("resource_session",

checkMap);

}

Map map =

(Map)request.getSession().getAttribute("resource_session");

......//获取对象或其他值的逻辑处理代码

outMap.put("currentPage", currentPage);//当期页

outMap.put("lineSize",

pager.getPageSize());//每页显示数量

outMap.put("totalRecords",

totalRecords);//总条数

outMap.put("tmanagerResource",

tmanagerResource);//每一页对应的资源池数据

......//其他值

} catch (Exception e) {

e.printStackTrace();

log.error(e);

}

return outMap;

}

3>.每次点击某个checkbox，调用后台方法，根据是选中还是未选中再决定是往map里存放还是删除，最后遍历map里的ID，实时更新全局变量的值。​​

​前端JSP：

function selected(obj){

var id = obj.value;

var checkedStatus = obj.checked;

$.ajax({

url:"目标地址/目标controller/check",

data:{

"id" : id,

"checkedStatus" : checkedStatus

},

dataType:"json",

type:"post",

async:false,

success:function(data){

checkedIds = data.ids;

}

});

}

​后台Controller：

@RequestMapping(value = "/check",method

= RequestMethod.POST)

@ResponseBody

public Map check(HttpServletRequest

request,String id,String checkedStatus){

log.info("------------单点checkbox时

更新ids---------------");

Map outMap = new HashMap();//存放已选中checkbox

组成的字符串，再返回到页面中去

Map map =

(Map)request.getSession().getAttribute("resource_session");//取session中已经存在的map

String ids="";//已选中checkbox 组成的字符串

System.out.println("单点checkbox时

更新ids------checkedStatus:"+checkedStatus);

try {

//根据是选中还是未选中再决定是往map里存放还是删除

if(checkedStatus.equals("true")){

map.put(id, id);

}else if(checkedStatus.equals("false")){

map.remove(id);

}

//遍历map，用分号拼接，实时更新全局变量的值。

if(map != null){

for(Map.Entry me : map.entrySet()){

if(ids.equals("")){

ids = (String)me.getValue();

}else{

ids = ids + ";" + (String)me.getValue();

}

}

}

System.out.println("单点checkbox时 更新ids------ids:"+ids);

outMap.put("ids", ids);

} catch (Exception e) {

e.printStackTrace();

outMap.put("success", false);

log.error(e);

}

return outMap;

}

4>.每次翻页，对​全局变量进行处理，以逗号分离放到数组中，遍历数组中的checkbox的ID，查看翻页后是否有某些checkbox已被选中，若有，则设为已选中状态。

function pageTurnCheck(){

var obj =

document.getElementsByName("check");

var arr = checkedIds.split(";");

for(i=0;i

for(n=0;n

if(obj[i].value==arr[n]){

obj[i].checked = true;//如果有匹配的就选中

}

}

}

}

​4.拓展：

1>.查询后仍然可以使已选中的checkbox保持已选中状态

2>.实现全选​checkbox

3>.每次点击表格里的checkbox时，判断当前页面的checkbox是否全部选中，若​全部选中，则全选checkbox自动选中，若没有全部选中，则全选checkbox处于未选中状态。