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: "<目标地址/目标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+'" οnclick="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+'"                         οnclick="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" οnclick="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处于未选中状态。