springmvc框架中實現全選
阿新 • • 發佈:2019-02-18
jsp頁面中:
<form action="workCtrl/exportChecked.do" method="post"> <table class="altrowstable" id="alternatecolor" border="1" cellpadding="0" cellspacing="0" width="90%" style="text-align: center;" align="center" rules="rows" frame="void"> <tr> <th><input type="checkbox" onclick="checkAll(checkall)" id="checkall" name="checkall"></th> <th>編號</th> <th>標題</th> <th>內容</th> <th>起始時間</th> <th>結束時間</th> <th>狀態</th> <th>詳情</th> </tr> <c:forEach items="${pi.list}" var="work"> <tr> <td><input type="checkbox" name="info" value="${work.workId}" onclick="checkAllInfo()"></td> <td>${work.workId}</td> <td> <c:if test="${fn:length(work.workTitle)>5}"> ${fn:substring(work.workTitle, 0, 5)} ... </c:if> <c:if test="${fn:length(work.workTitle)<=5}"> ${work.workTitle} </c:if> </td> <td> <c:if test="${fn:length(work.workContent)>5}"> ${fn:substring(work.workContent, 0, 5)} ... </c:if> <c:if test="${fn:length(work.workContent)<=5}"> ${work.workContent} </c:if> </td> <td><fmt:formatDate value="${work.workStartTime}" pattern="yyyy-MM-dd"/></td> <td><fmt:formatDate value="${work.workStopTime}" pattern="yyyy-MM-dd"/></td> <td> <c:if test="${work.workState == 0}"> 未完成 </c:if> <c:if test="${work.workState == 1}"> 已完成 </c:if> </td> <td><a href="workCtrl/seeWorkDetails.do?work_ID=${work.workId}&success=">詳情</a></td> </tr> </c:forEach> <tr align="center"> <td colspan="8"> <a href="workCtrl/getAllMyWork.do?pageNum=1&work_State=${work_State}&isWork_StopTime=${isWork_StopTime}">首頁</a> <a href="workCtrl/getAllMyWork.do?pageNum=${pi.pageNum>1 ? (pi.pageNum-1):1 }&work_State=${work_State}&isWork_StopTime=${isWork_StopTime}">上一頁</a> <a href="workCtrl/getAllMyWork.do?pageNum=${pi.pageNum<pi.pages ? (pi.pageNum+1):pi.pages }&work_State=${work_State}&isWork_StopTime=${isWork_StopTime}">下一頁</a> <a href="workCtrl/getAllMyWork.do?pageNum=${pi.pages }&work_State=${work_State}&isWork_StopTime=${isWork_StopTime}">尾頁</a> 當前${pi.pageNum }/${pi.pages }頁,共${pi.total }條 <input type="hidden" value="${pi.pageNum}" name="pageNum"> <input type="hidden" value="${work_State}" name="work_State"> <input type="hidden" value="${isWork_StopTime}" name="isWork_StopTime"> <input type="submit" value="匯出本頁所選項"> </td> </tr> </table> </form>
jsp頁面中的js程式碼:
<script type="text/javascript"> //對全選按鈕的監聽,點選了全選就會全選,再點選就會全部取消 function checkAll(checkall) { arr = document.getElementsByName('info'); if (checkall.checked == true) { for(i=0;i<arr.length;i++){ arr[i].checked = true; } }else{ for(i=0;i<arr.length;i++){ if((arr[i]).checked==false){ arr[i].checked = true; }else {arr[i].checked = false; } } } } //對所有選項按鈕的監聽,當一個一個選擇了所有的選項的複選框時,全選按鈕也就選中了,只要有一個選項沒選中,全選按鈕就不會選中 function checkAllInfo(){ arr = document.getElementsByName('info'); var flag = false; for(i=0;i<arr.length;i++){ if((arr[i]).checked==false){ flag = true; } } if(flag){ document.getElementById("checkall").checked = false; }else{ document.getElementById("checkall").checked = true; } } </script>
控制器中程式碼:
//匯出所選中的所有工作到excel表格 @RequestMapping("exportChecked") public String exportChecked(Model model, @RequestParam("pageNum")Integer pageNum, @RequestParam("work_State")Integer work_State, @RequestParam("isWork_StopTime")Integer isWork_StopTime, @RequestParam("info")Integer[] ids){ for (int i = 0; i < ids.length; i++) { System.out.println("選中有:"+ids[i]); } model.addAttribute("pageNum", pageNum); model.addAttribute("work_State", work_State); model.addAttribute("isWork_StopTime", isWork_StopTime); return "redirect:getAllMyWork.do"; }
這裡是擷取的專案中的程式碼,可能看起來比較冗餘,核心程式碼就是上述中的js程式碼,以及jsp介面上的form表單,注意表單中的checkbox複選框!
執行效果:
介面
控制檯列印: