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

转载地址  http://blog.csdn.net/lxhjava/article/details/54633829

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函数实现：

[javascript]  view plain  copy

1. <script type="text/javascript">  
2.     function freeBound() {  
3.      //1.获得模板id，版本id,选择的场景id  
4.      var tempId=$('#templateId').val();  
5.      var tempVerId=$('#tempVerId').val();  
6.      var checkSceneIds =$('#checkedIds').val();   
7.   //$('input[name="sceneIds"]:checked').each(function(){   
8.   // checkSceneIds+=","+$(this).val();   
9.   //});   
10.   if(checkSceneIds.length==0){  
11.    alert('请选择需要解除的场景！');   
12.    return;  
13.   }else if(confirm('是否确认解除绑定？')){  
14.    checkSceneIds=checkSceneIds.substr(1,checkSceneIds.length);  
15.    var freeBoundUrl = "${pageContext.request.contextPath}/scene/freeBound.action";  
16.    $.ajax({  
17.     type:'post',  
18.     url:freeBoundUrl,  
19.     data:{"tempId":tempId,"tempVerId":tempVerId,"sceneIds":checkSceneIds},  
20.     dataType:'json',  
21.     success:function(data){  
22.      alert('解除绑定成功！');  
23.      location.href=location.href;  
24.     },  
25.     error:function(data){  
26.      alert('操作失败！');  
27.     }  
28.    })  
29.   }  
30.     }  
31.       
32.     //跨页多选  
33.     function updateCheckedIds(box){  
34.      //获得当前复选框的值  
35.      var id=box.value;  
36.      //历史所选的id,多个id以","分隔  
37.      var checkedIds=$('#checkedIds').val();  
38.      if(box.checked){//勾选  
39.       checkedIds+=","+id;//历史用没有则追加  
40.      }else{//取消勾选  
41.       checkedIds=checkedIds.replace(","+id, "");//id替换为空字符串，<strong>注：此处写法有误，应该先split,再for循环查找并替换</strong>  
42.      }  
43.      $('#checkedIds').val(checkedIds);//最新的所选值保存到隐藏域中  
44.     }  
45. </script>  

[html]  view plain  copy

1. //jsp部分源代码如下，大部分都贴出来了比较多：  
2.   
3.          <input type="button" class="btn" style="width:80px;text-align:center" value="解除绑定" onclick="freeBound();" />  
4. <form id="form1" action="querySceneByTempForFreeBound.action?templateId=${templateId}&tempVerId=${tempVerId}" style="padding:0; margin-top: 5px"  method="post" name="form1">  
5.       
6.     <input type="hidden" name="templateId" id="templateId" value="${templateId}"/>  
7.     <input type="hidden" name="tempVerId" id="tempVerId" value="${tempVerId}"/>  
8.     <input type="hidden" name="checkedIds" id="checkedIds" value="${checkedIds}"/>  
9.       
10.     <table border="0" cellpadding="0" cellspacing="0" style="margin-bottom:8px;table-layout:fixed;" id="table1" class="table datagrid">  
11.         <thead>  
12.         <tr>  
13.          <th width="4%"></th>  
14.             <th width="5%">序  号</th>  
15.             <th width="5%" nowrap="nowrap">场景编号</th>  
16.             <th width="10%" nowrap="nowrap">交易对象</th>  
17.             <th width="10%" nowrap="nowrap">业务系统</th>  
18.             <th width="30%" nowrap="nowrap">场景描述</th>  
19.             <th width="10%" nowrap="nowrap">签约环节</th>  
20.             <th width="5%" nowrap="nowrap">场景状态</th>  
21.         </tr>  
22.         </thead>  
23.         <tbody>  
24.         <c:forEach var="scene" items="${scenes}" varStatus="status">  
25.             <tr style="text-align: left">  
26.              <td align="center">  
27.              <input type="checkbox" name="sceneIds" onclick="updateCheckedIds(this)" value="${scene.id}"  
28.               <c:forEach var="sceneId" items="${ids}">  
29.                 <c:if test="${sceneId==scene.id}">checked="checked"</c:if>   
30.               </c:forEach>  
31.              />  
32.              </td>  
33.                 <td align="center">${status.index+1 }</td>  
34.                 <td>  
35.                         ${scene.sceneCode}  
36.                 </td>  
37.                 <td style="text-align: left">  
38.                         ${scene.transactionObjName}  
39.                 </td>  
40.                 <td style="text-align: left">  
41.                         ${scene.busiSysNameStr}  
42.                 </td>  
43.                 <td title="${scene.sceneDesc}" style="overflow:hidden;text-overflow:ellipsis;" nowrap=false>  
44.                         ${scene.sceneDesc}  
45.                 </td>  
46.                 <td style="text-align: left">  
47.                         ${scene.signLinkName}  
48.                 </td>  
49.                 <td align="center">  
50.                     <c:if test="${scene.sceneStatus==1 }">有效</c:if>  
51.                     <c:if test="${scene.sceneStatus==2 }">无效</c:if>  
52.                 </td>  
53.             </tr>  
54.         </c:forEach>  
55.         </tbody>  
56.     </table>  
57.     <input type="hidden" id="busiSysName" value="${busiSysName}"/>  
58.     <input type="hidden" id="serviceLife" value="${serviceLife}"/>  
59.     <tw:page/>  
60. </form>  
61.   
62.   
63.   
64.   
65. //action中用于处理所选的id代码如下：  
66.   
67.    String checkedIds=request.getParameter("checkedIds");//选中的场景id  
68.   
69.     if( checkedIds!=null){  
70.          String[] ids=checkedIds.split(",");//切割  
71.          request.setAttribute("ids",ids);  
72.       }  
73.    request.setAttribute("checkedIds",checkedIds);