使用sessionStorage完成复选框跨页多选
本分页是一个单独的jsp文件，include到我的list.jsp中，在list.jsp中进行多选，系统太老，目前只能如此，大神勿喷
list.jsp页面
显示数据的页面，例如：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="/common/meta.jsp"%>
<title></title>
<%@ include file="/common/calendar.jsp"%>
</head>
<body>
<form id="listForm" name="listForm" action="list.xhtml" method="post" >
<table cellpadding="0" cellspacing="0" id="querys" class="lists">
<tr>
<td colspan="4" align="center">
<input type="submit" id="button-find" value="<fmt:message key='query'/>" onclick="removeSessionStorage()">
<input type="reset" id="button-reset" value="<fmt:message key='reset'/>" onclick="removeSessionStorage()" >
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0">
<tr height="5">
<td></td>
</tr>
</table>
<!-- 工具栏区域 -->
<!-- 数据列表区域 -->
<table cellpadding="0" cellspacing="0" id="lists" class="lists">
<tr>
<th width="50">
<input type="checkbox" onclick="SelectedAll('listForm','ids',this);">
<fmt:message key="checkAll" />
</th>
<th id="column_r.xxx"><fmt:message key="receipt.xxx" /></th>
......
<th id="column_r.yyy"><fmt:message key="receipt.xxx" /></th>
</tr>
<td><input type="checkbox" name="ids" id="ids" value="${receipt.id}" onclick="Selected(this);"></td>
...
</table>
<jsp:include page="/common/pagination.jsp" flush="true"></jsp:include>
</form>
<script type="text/javascript">
var checkApproval = true;
var selectedIds=new Array();
function doSubmit(){
....
}
//查看、打印开票简表，使用-sessionStorage---by--zq--2018-1-22
function printSimpleReceiptRequests() {
var session = sessionStorage.getItem("selectedIdsSession");
if(session==null && selectedIds.length==0){
alert(msg.selectone);
return;
}
var ids = session!=null?session:selectedIds;
if(ids!=null){
openDialog("${ctx}/finance/receipt/simpleReceiptRequests.xhtml?ids="+ids, 'newwindow', 1100,600);
}
}
/**2013-04-09 by zhaozhen 未进行开票分组的不能提交 begin **/
function checkgroup(id){
var flag;
var params = "id="+id;
new Ajax.Request("${ctx}/finance/receipt/checkgroup.xhtml",
{method: 'post', parameters: params, asynchronous: false, setRequestHeader:{"If-Modified-Since":"0"}, onSuccess: function (transport){
var json = eval('(' + transport.responseText + ')');
flag = json.flag;
}
}
);
return flag;
}
/**2013-04-09 by zhaozhen 未进行开票分组的不能提交 end **/
//全选 box---by--zq--2018-1-22
function SelectedAll(form, checkboxId, checkAll) {
var inputs = document.getElementById(form).getElementsByTagName('input');
for ( var i = 0; i < inputs.length; i++) {
if (inputs[i].type=="checkbox"&&inputs[i].id==checkboxId&&inputs[i].disabled==false){
var sss = sessionStorage.getItem("selectedIdsSession");
if(checkAll.checked){
selectedIds.push(inputs[i].value);
inputs[i].checked=true;
}else{
selectedIds.remove(inputs[i].value);
inputs[i].checked=false;
var newIds = new Array();
newIds = listful(sss);
newIds.removeIds(thisCheckbox.value);
sss = newIds;
}
if(sss!=null && selectedIds!="" && selectedIds!=null && selectedIds.length>0){
sessionStorage.removeItem("selectedIdsSession");//清空sessionStorage
sessionStorage.setItem("selectedIdsSession", listful(sss+","+selectedIds));
}else{
sessionStorage.removeItem("selectedIdsSession");//清空sessionStorage
sessionStorage.setItem("selectedIdsSession", selectedIds);
}
}
}
}
//单选box---by--zq--2018-1-22
function Selected(thisCheckbox) {
//加上contains方法是为了去重，在pagination.jsp中自定义数组的contains(arr, obj)函数
var sss = sessionStorage.getItem("selectedIdsSession");
if (thisCheckbox.checked ){
selectedIds.push(thisCheckbox.value);
}else{
selectedIds.removeIds(thisCheckbox.value);
var newIds = new Array();
newIds = listful(sss);
newIds.removeIds(thisCheckbox.value);
sss = newIds;
}
if(sss!=null && selectedIds!="" && selectedIds!=null && selectedIds.length>0){
sessionStorage.removeItem("selectedIdsSession");//清空sessionStorage
sessionStorage.setItem("selectedIdsSession", listful(sss+","+selectedIds));
}else{
sessionStorage.removeItem("selectedIdsSession");//清空sessionStorage
sessionStorage.setItem("selectedIdsSession", selectedIds);
}
}
/* 给session重新排列 成不重复数组 */
function listful(sss){
var newIds = new Array();
if(isContains(sss, ',')){
newIds = sss.split(",");
newIds =unique(newIds);
}else{
newIds = sss;
}
return newIds;
}
function unique(arr) {
var result=new Array();
for(var i=0; i<arr.length; i++){
if(result.indexOf(arr[i])==-1){
result.push(arr[i])
}
}
return result;
}
//返回页面后补上页面刷新而导致消失的对勾 ,window.onload启动时运行---by--zq--2018-1-22
function backchecked(){
//Ext.onReady(function backchecked() {
var s = sessionStorage.getItem("selectedIdsSession");
if(s!=null){
var inputs = document.getElementById("listForm").getElementsByTagName('input');
for ( var i = 0; i < inputs.length; i++) {
if (inputs[i].type=="checkbox"&&inputs[i].id=="ids" &&inputs[i].disabled==false){
if (isContains(s, inputs[i].value)){
selectedIds.push(inputs[i].value);
inputs[i].checked=true;
}
}
}
}else{
return;
}
};
/* 自定义数组的contains函数 ---2018-1-19-by-zhangqi*/
function isContains(str, substr) {
return new RegExp(substr).test(str);
}
/*清空sessionStorage---by--zq--2018-1-22*/
function removeSessionStorage(){
selectedIds.length=0;//清空selectedIds
sessionStorage.removeItem("selectedIdsSession");//清空sessionStorage
sessionStorage.clear();//清空sessionStorage
}
Array.prototype.removeIds = function(val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
</script>
</body>
</html>
pagination.jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<input id="startIndex" type="hidden" name="startIndex">
<div id="pagination" align="right" class="pagination">
<c:if test="${!empty items.items}">
<fmt:message key='total' /> ${items.totalCount}
<fmt:message key='records' />
<c:choose>
<c:when test="${items.startIndex ne '0'}">
<a href="javascript:turn(0)"> <fmt:message key='firstpage' /> </a>
</c:when>
<c:otherwise>
<fmt:message key='firstpage' />
</c:otherwise>
</c:choose>
<c:choose>
<c:when test="${items.previousIndex lt items.startIndex}">
<a href="javascript:turn(${items.previousIndex})"> <fmt:message key='previous' /> </a>
</c:when>
<c:otherwise>
<fmt:message key='previous' />
</c:otherwise>
</c:choose>
<c:choose>
<c:when test="${items.nextIndex>items.startIndex}">
<a href="javascript:turn(${items.nextIndex})"> <fmt:message key='next' /> </a>
</c:when>
<c:otherwise>
<fmt:message key='next' />
</c:otherwise>
</c:choose>
<c:choose>
<c:when test="${items.lastIndex eq items.startIndex}">
<fmt:message key='lastpage' />
</c:when>
<c:otherwise>
<a href="javascript:turn(${items.lastIndex})"> <fmt:message key='lastpage' /> </a>
</c:otherwise>
</c:choose>
<fmt:message key='recordperpage' /> : ${items.pageSize} <input type="hidden" id="pageSize" name="pageSize" value="${items.pageSize}">
<fmt:message key='current' /> : <input id="currentPage" type="text" name="currentPage" size="3" value="${items.currentPage}" onchange="gotoPage()" style="width:40px; height:16px; line-height:16px; border:1px solid #A9BAC9;font-size: 12px;"> / ${items.pageCount}
<input type="hidden" id="pageCount" name="pageCount" value="${items.pageCount}">
</c:if>
</div>
<script>
function turn(startIndex) {
$("startIndex").value = startIndex;
document.forms[0].submit();
}
function gotoPage() {
if(Number($("currentPage").value)>Number($("pageCount").value)){
$("currentPage").value=$("pageCount").value;
}
$("startIndex").value = ($("currentPage").value-1)*$("pageSize").value;
document.forms[0].submit();
}
</script>先放这里，留着看吧，老技术，适合老系统