複選框跨頁多選實現js+struts2
阿新 • • 發佈：2019-01-08
轉載地址 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- <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;
- }elseif(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部分原始碼如下，大部分都貼出來了比較多：
- <inputtype="button"class="btn"style="width:80px;text-align:center"value="解除繫結"onclick="freeBound();"/>
- <formid="form1"action="querySceneByTempForFreeBound.action?templateId=${templateId}&tempVerId=${tempVerId}"style="padding:0; margin-top: 5px"method="post"name="form1">
- <inputtype="hidden"name="templateId"id="templateId"value="${templateId}"/>
- <inputtype="hidden"name="tempVerId"id="tempVerId"value="${tempVerId}"/>
- <inputtype="hidden"name="checkedIds"id="checkedIds"value="${checkedIds}"/>
- <tableborder="0"cellpadding="0"cellspacing="0"style="margin-bottom:8px;table-layout:fixed;"id="table1"class="table datagrid">
- <thead>
- <tr>
- <thwidth="4%"></th>
- <thwidth="5%">序 號</th>
- <thwidth="5%"nowrap="nowrap">場景編號</th>
- <thwidth="10%"nowrap="nowrap">交易物件</th>
- <thwidth="10%"nowrap="nowrap">業務系統</th>
- <thwidth="30%"nowrap="nowrap">場景描述</th>
- <thwidth="10%"nowrap="nowrap">簽約環節</th>
- <thwidth="5%"nowrap="nowrap">場景狀態</th>
- </tr>
- </thead>
- <tbody>
- <c:forEachvar="scene"items="${scenes}"varStatus="status">
- <trstyle="text-align: left">
- <tdalign="center">
- <inputtype="checkbox"name="sceneIds"onclick="updateCheckedIds(this)"value="${scene.id}"
- <c:forEachvar="sceneId"items="${ids}">
- <c:iftest="${sceneId==scene.id}">checked="checked"</c:if>
- </c:forEach>
- />
- </td>
- <tdalign="center">${status.index+1 }</td>
- <td>
- ${scene.sceneCode}
- </td>
- <tdstyle="text-align: left">
- ${scene.transactionObjName}
- </td>
- <tdstyle