SSM框架实现批量删除

前言：最近做项目遇到批量删除，头都炸了，不知道怎么做，去求助大神，借助人家的代码实现，也没能解决，加班到一点才舍得睡觉，在那之前还是不理解这个批量删除怎么搞，过了一夜自己才想通，终于实现了批量删除，代码如下：

实现的效果图：不想截这么多图了 ，大家大概想象一下、、、、、、嘿嘿

第一张图是选中行，然后点击批量删除，也可以全选删除，如图：

第二张图是点击批量删除之后，弹出确认是否删除确认框，点击确认后删除选中的行，这样8和7都删除掉了；如果没有选中任何行不执行删除，点击取消也会不执行删除，如图：

实现代码：

第一步实体类建立起来，包名cn.jbit.pojo，类名Cover.java

package cn.jbit.pojo;

import java.util.Date;

//封面图类
public class Cover {
	private int cv_id;//封面图编号
	private String cv_url;//封面图路径
	private String cv_text;//封面图名称
	private Date cv_time;//上传时间
	private int ad_id;//用户编号
	public Date getCv_time() {
		return cv_time;
	}
	public void setCv_time(Date cv_time) {
		this.cv_time = cv_time;
	}
	public int getAd_id() {
		return ad_id;
	}
	public void setAd_id(int ad_id) {
		this.ad_id = ad_id;
	}
	public int getCv_id() {
		return cv_id;
	}
	public void setCv_id(int cv_id) {
		this.cv_id = cv_id;
	}
	public String getCv_url() {
		return cv_url;
	}
	public void setCv_url(String cv_url) {
		this.cv_url = cv_url;
	}
	public String getCv_text() {
		return cv_text;
	}
	public void setCv_text(String cv_text) {
		this.cv_text = cv_text;
	}
	
}

第二步控制器代码，包名cn.jbit.controller，控制器类名为CoverImgController.java

package cn.jbit.controller;

import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;


import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.propertyeditors.CustomDateEditor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.WebDataBinder;
import org.springframework.web.bind.annotation.InitBinder;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import cn.jbit.pojo.Cover;
import cn.jbit.service.CoverImgService;


//封面图控制器

@Controller
@RequestMapping("cover")
public class CoverImgController {
	
	//配置时间
		@InitBinder
		public void initBinder(WebDataBinder dataBinder){
			dataBinder.registerCustomEditor(Date.class, new CustomDateEditor(new SimpleDateFormat("yyyy-MM-dd"), true));
		}
		
		@Autowired
		private CoverImgService cImgService;

		public CoverImgService getcImgService() {
			return cImgService;
		}

		public void setcImgService(CoverImgService cImgService) {
			this.cImgService = cImgService;
		}
		
		
		/**
		 * 批量删除
		 * @param ids
		 * @return
		 */
		@RequestMapping("deleteByIds")
		@ResponseBody
		public String deleteByIds(Integer[] ids) {
			try {
				//批量删除
				cImgService.deleteList(ids);//删除的方法
			} catch (Exception e) {
				return "error";
			}
			return "ok";
		}


	
}

第三步，Service层，包名cn.jbit.service，类名为CoverImgService.java

package cn.jbit.service;

import java.util.List;

import cn.jbit.pojo.Cover;

public interface CoverImgService {
	

	void deleteList(Integer[] ids);


}

第四步Service实现类层，包名cn.jbit.service.impl，类名CoverImgServiceImpl.java

package cn.jbit.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import cn.jbit.dao.CoverImgDao;
import cn.jbit.pojo.Cover;
import cn.jbit.service.CoverImgService;

@Service("cImgService")
public class CoverImgServiceImpl implements CoverImgService{
	
	@Autowired
	private CoverImgDao cDao;

	public CoverImgDao getcDao() {
		return cDao;
	}

	public void setcDao(CoverImgDao cDao) {
		this.cDao = cDao;
	}
	

	public void deleteList(Integer[] ids) {
            //批量删除方法
		cDao.deleteList(ids);
	}

}

第五步Dao层，包名cn.jbit.dao，类名CoverImgDao.java

package cn.jbit.dao;

import java.util.List;

import org.apache.ibatis.annotations.Param;

import cn.jbit.pojo.Cover;

public interface CoverImgDao {
	

	void deleteList(Integer[] ids);


}

第六步Mapper.xml文件,执行sql语句，包名cn.jbit.dao，文件名CoverImgMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cn.jbit.dao.CoverImgDao">
	<!-- 这是一个封面图的mybaits的mapper文件 -->
	
	<resultMap type="Cover" id="coverList"></resultMap>
	
	
	<!-- 批量删除封面图 -->
	<delete id="deleteList">
		delete from cover where cv_id in
		<foreach collection="array" item="ids" open="(" separator=","
			close=")">
			#{ids}
		</foreach>
	</delete>

	
</mapper> 

第七步页面coverImg.jsp，这是我放页面的位置。。。

页面代码如下：

<div class="cl pd-5 bg-1 bk-gray mt-20"> <span class="l"><a href="javascript:;" onclick="del()" class="btn btn-danger radius" id="deleteAll"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a> <a title="添加" href="javascript:;" onclick="cImg_add('添加封面图','coverImg_add.jsp','800','500')"  class="btn btn-success radius"><i class="Hui-iconfont">&#xe600;</i>添加</a></span> <span class="r">共有数据：<strong>54</strong> 条</span> </div>
	<table class="table table-border table-sort table-bordered table-bg" id="tableId">
		<thead>
			<tr>
				<th scope="col" colspan="9">封面图列表</th>
			</tr>
			<tr class="text-c">
				<th width="25"><input type="checkbox" id="all" value=""></th>
				<th width="40">ID</th>
				<th width="150">封面图名称</th>
				<th width="90">封面图路径</th>
				<th width="130">加入时间</th>
				<th width="130">管理员</th>
				<th width="100">操作</th>
			</tr>
		</thead>
		<tbody>
			<c:forEach items="${cList}" var="item">
				<tr class="text-c">
					<td><input type="checkbox" value="${item.cv_id}" name="id"></td>
					<td>${item.cv_id}</td>
					<td><img src="${item.cv_url}" style="width:200px;height: 50px;"/></td>
					<td>${item.cv_text}</td>
					<fmt:formatDate value="${item.cv_time}" var="day" pattern="yyyy-MM-dd"/>
					<td>${day}</td>
					<td>${item.ad_id}</td>
					<td class="td-manage"> <a title="编辑" href="javascript:;" onclick="cImg_edit('编辑封面图','coverImg_add.jsp','1','800','500')" class="ml-5" style="text-decoration:none">编辑</a> <a title="删除" href="javascript:;" onclick="cImg_del(this,'1')" class="ml-5" style="text-decoration:none">删除</a></td>
				</tr>
			</c:forEach>
		</tbody>
	</table>

用模板写的页面代码有点复杂，大家奏合着看吧~~~我只能帮到着里了，页面的名字跟js的名字对上就行了~~~

我把js代码写页面里了

<script type="text/javascript">
//全选
var oall=document.getElementById("all");
var oid=document.getElementsByName("id");
oall.onclick=function(){//勾选全选时
	for(var i=0;i<oid.length;i++){
		//所有的选择框和全选一致
		oid[i].checked=oall.checked;		
	}
};
//点击复选框
for(var i=0;i<oid.length;i++){
	oid[i].onclick=function(){
		//判断是否全部选中,遍历集合
		for(var j=0;j<oid.length;j++){
		  if(oid[j].checked==false){
			oall.checked=false;
			break;
		  }else{
		    oall.checked=true;
		  }
		}
	};
}
/*封面图-批量删除*/
function del(){
	var r=confirm("是否确认删除？");    
	if(r==true){ 
		//确认删除
		var ids="";
		var n=0;
		for(var i=0;i<oid.length;i++){
			if(oid[i].checked==true){//选中为true
				var id=oid[i].value;
				if(n==0){
					ids+="ids="+id;
				}else{
					ids+="&ids="+id;
				}
				n++;
			}			
		}
	    //上面会拼接出一个名为ids的数组ids=1&ids=2&ids=3&ids=4……
	    $.get("cover/deleteByIds",ids,function(data){
			 if(data=="ok"){
				alert("删除成功!");
				//删除成功后，调用action方法刷新页面信息
				location.reload();
				$("input[name=id]").removeAttr("checked");
			}else{
				alert("请选中行!");
			} 
		});
		return true; 
	}else{ 
		//不删除
		return false;    
	} 
}
</script>

后言：emmmmm，大概就这么多了吧，虽然看起来代码很多，其实很多代码复制粘贴之前有别的代码块，我只是把它删了而已，批量删除的代码还是挺少的，就是全选那个js多一点，如果有耐心，慢慢研究还是可以实现的，就这样了~