複選框跨頁多選實現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函數實現：

<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替換爲空字符串，<strong>注：此處寫法有誤，應該先split,再for循環查找並替換</strong>
     }
     $('#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);