复选框跨页多选实现(js+struts2)

来源：互联网发布：js offsetwidth 编辑：程序博客网时间：2024/05/19 19:13

1.问题描述：查询出的数据分页显示在jsp页面table中，table的每一行都有复选框，用户在当前页勾选数据而且可以跳转到任意页勾选，且勾选的数据在翻页时记住勾选。用户勾选完数据，可以同时提交所选的数据。

2.需要解决的问题 1：记住之前页所勾选的数据，返回之前页可以查看到勾选的数据。2：对用户在不同页所勾选的数据需要点击提交按钮时同时获取。

3.实现思想：根据上面描述的问题，我们可以在复选框上添加onclick事件（见updateCheckedIds），这个事件负责处理用户对当前数据的操作（勾选/取消勾选），同时在jsp中还要有一个隐藏域来保存所有勾选的数据；onclick事件函数负责变更隐藏域中的值。这里我获取当前数据的id,再通过判断是勾选，还是取消勾选，来决定是否添加到隐藏域中还是以空字符串替换之前已经勾选的id。在提交按钮的onclick函数中来获取隐藏域中的值。需要注意的是：前提是点击上一页，下一页等翻页时是提交表单的方式，这样才能把当前页所选的id(保存在隐藏域中)，即隐藏域中的值提交到action。另外action返回到jsp页面时需要两个forEach循环（外层为<c:forEach>用于显示集合数据，里层为<c:forTokens>用于循环字符串，字符串中的id之间以“,”分隔；我在action做了切割，用的是两个forEach）来判断数据是否勾选过。我这里的分页功能做了封装。

参考源代码：

js函数实现：

<script type="text/javascript">    function freeBound() {     //1.获得模板id，版本id,选择的场景id     var tempId=$('#templateId').val();     var tempVerId=$('#tempVerId').val();     var checkSceneIds =$('#checkedIds').val();   //$('input[name="sceneIds"]:checked').each(function(){   // checkSceneIds+=","+$(this).val();   //});   if(checkSceneIds.length==0){   alert('请选择需要解除的场景！');    return;  }else if(confirm('是否确认解除绑定？')){   checkSceneIds=checkSceneIds.substr(1,checkSceneIds.length);   var freeBoundUrl = "${pageContext.request.contextPath}/scene/freeBound.action";   $.ajax({    type:'post',    url:freeBoundUrl,    data:{"tempId":tempId,"tempVerId":tempVerId,"sceneIds":checkSceneIds},    dataType:'json',    success:function(data){     alert('解除绑定成功！');     location.href=location.href;    },    error:function(data){     alert('操作失败！');    }   })  }    }        //跨页多选    function updateCheckedIds(box){     //获得当前复选框的值     var id=box.value;     //历史所选的id,多个id以","分隔     var checkedIds=$('#checkedIds').val();     if(box.checked){//勾选      checkedIds+=","+id;//历史用没有则追加     }else{//取消勾选      checkedIds=checkedIds.replace(","+id, "");//id替换为空字符串，注：此处写法有误，应该先split,再for循环查找并替换     }     $('#checkedIds').val(checkedIds);//最新的所选值保存到隐藏域中    }</script>

//jsp部分源代码如下，大部分都贴出来了比较多：         <input type="button" class="btn" style="width:80px;text-align:center" value="解除绑定" onclick="freeBound();" /><form id="form1" action="querySceneByTempForFreeBound.action?templateId=${templateId}&tempVerId=${tempVerId}" style="padding:0; margin-top: 5px"  method="post" name="form1">        <input type="hidden" name="templateId" id="templateId" value="${templateId}"/>    <input type="hidden" name="tempVerId" id="tempVerId" value="${tempVerId}"/>    <input type="hidden" name="checkedIds" id="checkedIds" value="${checkedIds}"/>        <table border="0" cellpadding="0" cellspacing="0" style="margin-bottom:8px;table-layout:fixed;" id="table1" class="table datagrid">        <thead>        <tr>         <th width="4%"></th>            <th width="5%">序  号</th>            <th width="5%" nowrap="nowrap">场景编号</th>            <th width="10%" nowrap="nowrap">交易对象</th>            <th width="10%" nowrap="nowrap">业务系统</th>            <th width="30%" nowrap="nowrap">场景描述</th>            <th width="10%" nowrap="nowrap">签约环节</th>            <th width="5%" nowrap="nowrap">场景状态</th>        </tr>        </thead>        <tbody>        <c:forEach var="scene" items="${scenes}" varStatus="status">            <tr style="text-align: left">             <td align="center">             <input type="checkbox" name="sceneIds" onclick="updateCheckedIds(this)" value="${scene.id}"              <c:forEach var="sceneId" items="${ids}">                <c:if test="${sceneId==scene.id}">checked="checked"</c:if>               </c:forEach>             />             </td>                <td align="center">${status.index+1 }</td>                <td>                        ${scene.sceneCode}                </td>                <td style="text-align: left">                        ${scene.transactionObjName}                </td>                <td style="text-align: left">                        ${scene.busiSysNameStr}                </td>                <td title="${scene.sceneDesc}" style="overflow:hidden;text-overflow:ellipsis;" nowrap=false>                        ${scene.sceneDesc}                </td>                <td style="text-align: left">                        ${scene.signLinkName}                </td>                <td align="center">                    <c:if test="${scene.sceneStatus==1 }">有效</c:if>                    <c:if test="${scene.sceneStatus==2 }">无效</c:if>                </td>            </tr>        </c:forEach>        </tbody>    </table>    <input type="hidden" id="busiSysName" value="${busiSysName}"/>    <input type="hidden" id="serviceLife" value="${serviceLife}"/>    <tw:page/></form>//action中用于处理所选的id代码如下：   String checkedIds=request.getParameter("checkedIds");//选中的场景id    if( checkedIds!=null){         String[] ids=checkedIds.split(",");//切割         request.setAttribute("ids",ids);      }   request.setAttribute("checkedIds",checkedIds);

0 0