SSM框架實現批量刪除
阿新 • • 發佈：2018-12-01
前言：最近做專案遇到批量刪除，頭都炸了，不知道怎麼做，去求助大神，藉助人家的程式碼實現，也沒能解決，加班到一點才捨得睡覺，在那之前還是不理解這個批量刪除怎麼搞，過了一夜自己才想通，終於實現了批量刪除，程式碼如下：
實現的效果圖：不想截這麼多圖了 ，大家大概想象一下、、、、、、嘿嘿
第一張圖是選中行，然後點選批量刪除，也可以全選刪除，如圖：
第二張圖是點選批量刪除之後，彈出確認是否刪除確認框，點選確認後刪除選中的行，這樣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"></i> 批量刪除</a> <a title="新增" href="javascript:;" onclick="cImg_add('新增封面圖','coverImg_add.jsp','800','500')" class="btn btn-success radius"><i class="Hui-iconfont"></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多一點，如果有耐心，慢慢研究還是可以實現的，就這樣了~