jQuery 操作checkbox翻页保存选中状态

js:

$(function() { 
 var prodSelectedNames = $("#hiddenProductNames");
 var prodSelectedIds = $("#hiddenProductIds");
 if(prodSelectedIds.val()!=""){
 var oldSelected = prodSelectedIds.val().split(',');
 $('input:checkbox[name=ids]').each(function() {
  if ($.inArray($(this).val(), oldSelected) != -1)
   this.checked = true;
 });
 }

 $('input:checkbox[name=ids]').click(function() { 
  if(prodSelectedIds.val()!="" ){
   var prodIdsValues = prodSelectedIds.val().split(',');
   var prodNameValues=prodSelectedNames.val().split(',');
   var i = $.inArray($(this).val(), prodIdsValues);
   if (this.checked) {
   if (i == -1){
    prodIdsValues.push($(this).val());
    prodNameValues.push($(this).attr("productName"));
    }
  } else {
  if (i != -1) {
  prodIdsValues.splice(i, 1);
  prodNameValues.splice(i, 1);
   }
  }
  prodSelectedNames.val(prodNameValues);
  prodSelectedIds.val(prodIdsValues);
 }else if(prodSelectedIds.val()=="" && this.checked){
     prodSelectedIds.val($(this).val());
     prodSelectedNames.val($(this).attr("productName"));
     } 
 });

    $('#queryName').bind('keypress',function(event){
            if(event.keyCode == "13") {
         return false;
            }
        });
})

function addProduct() {
    saveChangeProd();
    $("#productNames").val($("#hiddenProductNames").val());
 $("#productIds").val($("#hiddenProductIds").val());
 $("#contain").empty();
 closeDialog('contain'); 
}

// function clearProduct(){
//  $("#productDiv input[name='ids']").attr("checked",false);
// }

 function _gotoPage(pageNo) {
    saveChangeProd();
  var queryName=$("#queryName").val();
  var pageNo=pageNo;
  showProduct(queryName,pageNo); 
 
 }


 function saveChangeProd(){
  var prodSelectedNames = $("#hiddenProductNames");
  var prodSelectedIds = $("#hiddenProductIds");
    $("#productDiv input[name='ids']").each(function(i,ele){
   if(prodSelectedIds.val()!="" ){
   var prodIdsValues = prodSelectedIds.val().split(',');
   var prodNameValues=prodSelectedNames.val().split(',');
   var i = $.inArray($(this).val(), prodIdsValues);
   if (this.checked) {
   if (i == -1){
    prodIdsValues.push($(this).val());
    prodNameValues.push($(this).attr("productName"));
    }
  } else {
  if (i != -1) {
  prodIdsValues.splice(i, 1);
  prodNameValues.splice(i, 1);
   }
  }
  prodSelectedNames.val(prodNameValues);
  prodSelectedIds.val(prodIdsValues);
 }else if(prodSelectedIds.val()=="" && this.checked){
     prodSelectedIds.val($(this).val());
     prodSelectedNames.val($(this).attr("productName"));
     } 
     });
 }

html

<div id="productDiv">
<form action="v_product_list.do" method="post" style="padding-top:5px;">
<@s.m "cmsProduct.name"/>:
 <input type="text" name="queryName" id="queryName" value="${queryName!}" style="width:150px" />
 <input class="query" type="button" id="queryButton" value="<@s.m "global.query"/>" οnclick="_gotoPage($('#_goPs').val());"/>
 <input type="hidden" name="pageNo" value="${pageNo!}" id="pageNo"/>
</form>
<@p.table value=productList;cmsProduct,i,has_next><#rt/>
 <@p.column align="center" width="20%" title="<input type='checkbox' οnclick='Pn.checkbox(\"ids\",this.checked)'/>" width="30%">
  <input type='checkbox' name='ids' value='${(cmsProduct.id)}' productName="${(cmsProduct.name)!}"/><#t/>
 </@p.column><#t/>
 <@p.column code="产品名称" width="40%" align="center">${cmsProduct.name!}</@p.column><#t/>   
 <@p.column code="图片" width="40%" align="center">
 <img id="preImg1" src="${(cmsProduct.productImg)!}" alt="预览" style="width:100px;height:70px;background-color:#CCCCCC;border:1px solid #333">
 </@p.column><#t/>   
</@p.table>

<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td align="center" class="pn-sp">
 共 ${pagination.totalCount} 条
 每页<input type="text" value="${pagination.pageSize}" style="width:30px" οnfοcus="this.select();" οnblur="$.cookie('_cookie_page_size',this.value,{expires:3650});" οnkeypress="if(event.keyCode==13){$(this).blur();return false;}"/>条
 <input class="first-page" type="button" value="首 页" οnclick="_gotoPage('1');"<#if pagination.firstPage> disabled="disabled"</#if>/>
 <input class="pre-page" type="button" value="上一页" οnclick="_gotoPage('${pagination.prePage}');"<#if pagination.firstPage> disabled="disabled"</#if>/>
 <input class="next-page" type="button" value="下一页" οnclick="_gotoPage('${pagination.nextPage}');"<#if pagination.lastPage> disabled="disabled"</#if>/>
 <input class="last-page" type="button" value="尾 页" οnclick="_gotoPage('${pagination.totalPage}');"<#if pagination.lastPage> disabled="disabled"</#if>/>
 当前 ${pagination.pageNo}/${pagination.totalPage} 页 转到第<input type="text" id="_goPs" style="width:50px" οnfοcus="this.select();" οnkeypress="if(event.keyCode==13){$('#_goPage').click();return false;}"/>页
 <input class="go" id="_goPage" type="button" value="转" οnclick="_gotoPage($('#_goPs').val());"<#if pagination.totalPage==1> disabled="disabled"</#if>/>
</td></tr></table>
<p></p>
<div style="text-align:center;">
 <input type="button" class="button" value="确定" οnclick="addProduct();"/>  
    <input type="button" class="button" class="button" value="取消" οnclick="closeDialog('contain')"/>
<!--     <input type="button" value="清除" οnclick="clearProduct()"/> -->
    </div>
</div>

java:对比修改前和修改后的数据然后保存新增数据

public void updateCompanyProduct(CmsCompany cmsCompany,String prodIds){
  Integer id = cmsCompany.getId();
  List<Integer> oldProd=dao.findProdIds(id);
  List<Integer> newProd= new ArrayList<Integer>();
  List<Integer> copyProd= new ArrayList<Integer>();
  if(StringUtils.isNotBlank(prodIds)){
   for (String proId : prodIds.split(",")) {
    newProd.add(Integer.valueOf(proId));
    copyProd.add(Integer.valueOf(proId));
   }
  }
  copyProd.retainAll(oldProd);
  //System.out.println(copyProd);
  newProd.removeAll(copyProd);
  oldProd.removeAll(copyProd);
  for (Integer prodId : oldProd) {
   dao.deleteCompanyProduct(id,prodId);

  }
  for (Integer prodId : newProd) {
   dao.saveCompanyProduct(prodId,id);
  }
  
 }