1. 程式人生 > >springmvc框架中實現全選

springmvc框架中實現全選

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複選框!

執行效果:

介面

控制檯列印: