使用sessionStorage完成复选框跨页多选

使用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' />&nbsp;
        <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>
        &nbsp;
        <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>
        &nbsp;
        <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>
        &nbsp;
        <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>
        &nbsp;
        <fmt:message key='recordperpage' /> : ${items.pageSize} &nbsp;<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>

先放这里,留着看吧,老技术,适合老系统

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页