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: "<目标地址/目标controller/findResource",
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 i=0;i<t.length;i++){
var findManagerResource='<tr>'
+'<td><input type="checkbox" name="check" value="'+t[i].id+'" onclick="selected(this)" id="'+t[i].id+'"/></td>'
......//其他动态生成的表格的行
+ '</tr>';
$("#tbody").append(findManagerResource);
}
}else{
var findManagerResource='<tr>'
+'<td colspan=6>' + '没有搜索到任何资源池'+ '</td>'
+ '</tr>';
$("#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 i=0;i<t.length;i++){
var findManagerResource='<tr>'
+'<td><input type="checkbox" name="check" value="'+t[i].id+'" onclick="selected(this)" id="'+t[i].id+'"/></td>'
......//其他动态生成的表格的行
+ '</tr>';
$("#tbody").append(findManagerResource);
}
}else{
var findManagerResource='<tr>'
+'<td colspan=6>' + '没有搜索到任何资源池'+ '</td>'
+ '</tr>';
$("#tbody").append(findManagerResource);
}
}
});
pageTurnCheck();//进入每页时都会调用的方法,就是让已被选中的那些checkbox保持已选中状态。
//手动选中按钮
var tot = totalPage;
this.selectPage(n,tot);
}
});
}
(3)body表格
<table cellpadding="0" cellspacing="0">
<thead>
<td><input id="checkall" type="checkbox" name="cbox" onclick="selectAll()">全选</td>
......//其他行
</thead>
<tbody id="tbody">
</tbody>
</table>
后台Controller:
@RequestMapping(value = "/findResource",method = RequestMethod.POST)
@ResponseBody
public Map<String, Object> 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<String, Object> checkMap = new HashMap<String, Object>();
//存放session,命名为resource_session,注意:每个模块定义用于存放checkbox的session的名字必须不同
request.getSession().setAttribute("resource_session", checkMap);
}
Map<String, Object> 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<String, Object> check(HttpServletRequest request,String id,String checkedStatus){
log.info("------------单点checkbox时 更新ids---------------");
Map<String, Object> outMap = new HashMap<String, Object>();//存放已选中checkbox 组成的字符串,再返回到页面中去
Map<String, Object> 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<obj.length;i++){
for(n=0;n<arr.length;n++){
if(obj[i].value==arr[n]){
obj[i].checked = true;//如果有匹配的就选中
}
}
}
}
4.拓展:
1>.查询后仍然可以使已选中的checkbox保持已选中状态
2>.实现全选checkbox
3>.每次点击表格里的checkbox时,判断当前页面的checkbox是否全部选中,若全部选中,则全选checkbox自动选中,若没有全部选中,则全选checkbox处于未选中状态。
本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。