转载地址 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函数实现:
- <script type="text/javascript">
- function freeBound() {
-
- var tempId=$('#templateId').val();
- var tempVerId=$('#tempVerId').val();
- var checkSceneIds =$('#checkedIds').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;
-
- var checkedIds=$('#checkedIds').val();
- if(box.checked){
- checkedIds+=","+id;
- }else{
- checkedIds=checkedIds.replace(","+id, "");
- }
- $('#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);