JavaWeb学习-案例练习-图书管理后台-6-全选思路和实现过程

红太狼 2021-12-20 02:27 221阅读 0赞

在我们之前的案例中，在list.jsp，查看商品的表格中是没有全选按钮的，我们删除图书，只能一个一个删除，如果考虑到批量删除呢，所以我们需要新增全选/全不选按钮。

**1.需求**

![20190629193702256.png][]

需要像红圈那样添加勾选按钮，点击全选，或者批量勾选，我们可以同时删除多本书籍。

**2.添加全选思路分析**

我们先利用前端知识，给商品编号前面添加一列，控件的type类型为checkbox.

打开list.jsp，大概在117行到120行之间，在商品编号前面添加一栏，标题是全选和全不选

然后在130行附近，在id这行上面添加checkbox

刷新浏览器，这个时候checkbox的效果出来了

![20190629205359211.png][]

接下来就是如何设置，表格中每行前面的checkbox如何和表头中全选/全不选中checkbox的状态一直。checkbox有两个状态，一个勾选，一个是不勾选。

接下来的思路是

*  写一个checkAll()方法

1.      获取表头中checkAll这个checkbox元素
2.      获取所有复选框元素ids
3.      循环每一个复选框，并给其赋值，值和checkAll元素的状态值是一致。

*  利用点击事件调用chekAll()方法

**3.代码实现**

主要的方法代码如下

function checkAllItem(){
    		//得到checkAll这个元素，并拿到状态值
    		var flag = document.getElementById("checkAll").checked;
    		
    		//得到表格中每行的ids元素数组
    		var eles = document.getElementsByName("ids");
    		//遍历每个元素并赋值，checkbox的状态
    		for(var i=0; i<eles.length; i++){
    			eles[i].checked = flag;
    		}
    	}

然后在表头的checkbox那个元素中，οnclick="调用这个方法"，全部list.jsp代码如下

<%@ page language="java" pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <HTML>
    <HEAD>
    <meta http-equiv="Content-Language" content="zh-cn">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="${pageContext.request.contextPath}/admin/css/Style.css"
    	rel="stylesheet" type="text/css" />
    <script language="javascript"
    	src="${pageContext.request.contextPath}/admin/js/public.js"></script>
    <script type="text/javascript">
    	function addProduct() {
    		window.location.href = "${pageContext.request.contextPath}/admin/products/add.jsp";
    	}
    	
    	function delBook(id){
    		if(confirm("是否确定删除图书？"+id)){
    			location.href="${pageContext.request.contextPath}/delBookServlet?id=" + id;
    		}
    	}
    	
    	function checkAllItem(){
    		//得到checkAll这个元素，并拿到状态值
    		var flag = document.getElementById("checkAll").checked;
    		
    		//得到表格中每行的ids元素数组
    		var eles = document.getElementsByName("ids");
    		//遍历每个元素并赋值，checkbox的状态
    		for(var i=0; i<eles.length; i++){
    			eles[i].checked = flag;
    		}
    	}
    </script>
    </HEAD>
    <body>
    	<br>
    	<form id="Form1" name="Form1"
    		action="${pageContext.request.contextPath}/bookListServlet"
    		method="post">
    		<table cellSpacing="1" cellPadding="0" width="100%" align="center"
    			bgColor="#f5fafe" border="0">
    			<TBODY>
    				<tr>
    					<td class="ta_01" align="center" bgColor="#afd1f3"><strong>查
    							询 条 件</strong>
    					</td>
    				</tr>
    				<tr>
    					<td>
    						<table cellpadding="0" cellspacing="0" border="0" width="100%">
    							<tr>
    								<td height="22" align="center" bgColor="#f5fafe" class="ta_01">
    									商品编号</td>
    								<td class="ta_01" bgColor="#ffffff"><input type="text"
    									name="id" size="15" value="" id="Form1_userName" class="bg" />
    								</td>
    								<td height="22" align="center" bgColor="#f5fafe" class="ta_01">
    									类别：</td>
    								<td class="ta_01" bgColor="#ffffff"><select name="category"
    									id="category">
    										<option value="" selected="selected">--选择商品类加--</option>
    										<option value="文学">文学</option>
    										<option value="生活">生活</option>
    										<option value="计算机">计算机</option>
    										<option value="外语">外语</option>
    										<option value="经营">经营</option>
    										<option value="励志">励志</option>
    										<option value="社科">社科</option>
    										<option value="学术">学术</option>
    										<option value="少儿">少儿</option>
    										<option value="艺术">艺术</option>
    										<option value="原版">原版</option>
    										<option value="科技">科技</option>
    										<option value="考试">考试</option>
    										<option value="生活百科">生活百科</option>
    								</select></td>
    							</tr>
    
    							<tr>
    								<td height="22" align="center" bgColor="#f5fafe" class="ta_01">
    									商品名称：</td>
    								<td class="ta_01" bgColor="#ffffff"><input type="text"
    									name="name" size="15" value="" id="Form1_userName" class="bg" />
    								</td>
    								<td height="22" align="center" bgColor="#f5fafe" class="ta_01">
    									价格区间(元)：</td>
    								<td class="ta_01" bgColor="#ffffff"><input type="text"
    									name="minprice" size="10" value="" />- <input type="text"
    									name="maxprice" size="10" value="" /></td>
    							</tr>
    
    							<tr>
    								<td width="100" height="22" align="center" bgColor="#f5fafe"
    									class="ta_01"></td>
    								<td class="ta_01" bgColor="#ffffff"><font face="宋体"
    									color="red">  </font>
    								</td>
    								<td align="right" bgColor="#ffffff" class="ta_01"><br>
    									<br></td>
    								<td align="right" bgColor="#ffffff" class="ta_01">
    									<button type="submit" id="search" name="search"
    										value="查询" class="button_view">
    										查询</button>       <input
    									type="reset" name="reset" value="重置"
    									class="button_view" />
    								</td>
    							</tr>
    						</table>
    					</td>
    
    				</tr>
    				<tr>
    					<td class="ta_01" align="center" bgColor="#afd1f3"><strong>商品列表</strong>
    					</TD>
    				</tr>
    				<tr>
    					<td class="ta_01" align="right">
    						<button type="button" id="add" name="add" value="添加"
    							class="button_add" onclick="addProduct()">添加
    						</button>
    					</td>
    				</tr>
    				<tr>
    					<td class="ta_01" align="center" bgColor="#f5fafe">
    						<table cellspacing="0" cellpadding="1" rules="all"
    							bordercolor="gray" border="1" id="DataGrid1"
    							style="BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BORDER-LEFT: gray 1px solid; WIDTH: 100%; WORD-BREAK: break-all; BORDER-BOTTOM: gray 1px solid; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #f5fafe; WORD-WRAP: break-word">
    							<tr
    								style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; HEIGHT: 25px; BACKGROUND-COLOR: #afd1f3">
    								<td align="center" width="10%"><input type="checkbox" id="checkAll" onclick="checkAllItem()"/>全选/全不选</td>
    								<td align="center" width="24%">商品编号</td>
    								<td align="center" width="18%">商品名称</td>
    								<td align="center" width="9%">商品价格</td>
    								<td align="center" width="9%">商品数量</td>
    								<td width="8%" align="center">商品类别</td>
    								<td width="8%" align="center">编辑</td>
    
    								<td width="8%" align="center">删除</td>
    							</tr>
    
    			<c:forEach items="${books }" var="b">
    								<tr onmouseover="this.style.backgroundColor = 'white'"
    									onmouseout="this.style.backgroundColor = '#F5FAFE';">
    									<td style="CURSOR: hand; HEIGHT: 22px" align="center"
    										width="23"><input type="checkbox" name="ids"/></td>
    									<td style="CURSOR: hand; HEIGHT: 22px" align="center"
    										width="23">${b.id}</td>
    									<td style="CURSOR: hand; HEIGHT: 22px" align="center"
    										width="18%">${b.name}</td>
    									<td style="CURSOR: hand; HEIGHT: 22px" align="center"
    										width="8%">${b.price}</td>
    									<td style="CURSOR: hand; HEIGHT: 22px" align="center"
    										width="8%">${b.pnum}</td>
    									<td style="CURSOR: hand; HEIGHT: 22px" align="center">${b.category}</td>
    									<td align="center" style="HEIGHT: 22px" width="7%"><a
    										href="${pageContext.request.contextPath}/findBookByIdServlet?id=${b.id}">
    											<img
    											src="${pageContext.request.contextPath}/admin/images/i_edit.gif"
    											border="0" style="CURSOR: hand"> </a>
    									</td>
    
    									<td align="center" style="HEIGHT: 22px" width="7%"><a
    										href="javascript:delBook('${b.id }')">
    											<img
    											src="${pageContext.request.contextPath}/admin/images/i_del.gif"
    											width="16" height="16" border="0" style="CURSOR: hand">
    									</a>
    									</td>
    								</tr>
    				</c:forEach>
    						</table>
    					</td>
    				</tr>
    			</TBODY>
    		</table>
    	</form>
    </body>
    </HTML>

效果如下

![20190629223020581.png][]

[20190629193702256.png]: /images/20211220/efc3bd50b9f74e54b937e6de80b37c60.png
[20190629205359211.png]: /images/20211220/c43266b478e64ef0a452c8cbcff0d8b0.png
[20190629223020581.png]: /images/20211220/d55cc389be2d4a6fb7f65d49bdce5e4a.png