您的位置:首页 > Web前端 > JQuery

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

2016-03-28 15:49 567 查看
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"/>" onclick="_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' onclick='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" onfocus="this.select();" onblur="$.cookie('_cookie_page_size',this.value,{expires:3650});" onkeypress="if(event.keyCode==13){$(this).blur();return false;}"/>条 
<input class="first-page" type="button" value="首 页" onclick="_gotoPage('1');"<#if pagination.firstPage> disabled="disabled"</#if>/>
<input class="pre-page" type="button" value="上一页" onclick="_gotoPage('${pagination.prePage}');"<#if pagination.firstPage> disabled="disabled"</#if>/>
<input class="next-page" type="button" value="下一页" onclick="_gotoPage('${pagination.nextPage}');"<#if pagination.lastPage> disabled="disabled"</#if>/>
<input class="last-page" type="button" value="尾 页" onclick="_gotoPage('${pagination.totalPage}');"<#if pagination.lastPage> disabled="disabled"</#if>/> 
当前 ${pagination.pageNo}/${pagination.totalPage} 页  转到第<input type="text" id="_goPs" style="width:50px" onfocus="this.select();" onkeypress="if(event.keyCode==13){$('#_goPage').click();return false;}"/>页
<input class="go" id="_goPage" type="button" value="转" onclick="_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="确定" onclick="addProduct();"/>  
<input type="button" class="button" class="button" value="取消" onclick="closeDialog('contain')"/> 
<!--     <input type="button" value="清除" onclick="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);
}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: