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处于未选中状态。