这篇主要是使用ajax实现的删除优化版，上一个删除做的不好，这是重新做的代码，只上代码~
一、jsp页面
<div class="cl pd-5 bg-1 bk-gray mt-20"> <span class="l"><a href="javascript:;" onclick="delCoverImg()" class="btn btn-danger radius" id="deleteAll"><i class="Hui-iconfont"></i> 批量删除</a> <a title="添加" href="javascript:;" onclick="addCoverImg()" class="btn btn-success radius"><i class="Hui-iconfont"></i>添加</a></span> <span class="r">共有数据：<strong>${count}</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="" name="ad_all"></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="check_id"></td>
<td>${item.cv_id}</td>
<td class="${item.cv_url}"><img src="img/my/${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 class="${item.admin.ad_account}">${item.admin.ad_account}(${item.admin.ad_level})</td>
<!--cImg_edit('编辑封面图','<%=basePath %>/Backstage/coverImg_add.jsp','${item.cv_id}','800','500') -->
<td class="td-manage"> <a title="编辑" href="javascript:;" onclick="updateCoverImg(this)" class="ml-5" style="text-decoration:none">编辑</a> <a title="删除" href="javascript:;" onclick="cImg_del(this)" class="ml-5" style="text-decoration:none">删除</a></td>
</tr>
</c:forEach>
</tbody>
</table>二、实体类
package cn.jbit.pojo;
import java.util.Date;
//封面图类
public class Cover {
//Integer兼容null
private Integer cv_id;//封面图编号
private String cv_url;//封面图路径
private String cv_text;//封面图名称
private Date cv_time;//上传时间
private Integer ad_id;
private Admin admin;//配置一对多
//自行封装
}
三、控制器
//封面图控制器
@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,HttpServletResponse response) {
JSONObject jsonObject=new JSONObject();
//判断取到的数组id是否为空
if(ids==null) {
jsonObject.put("msg", "删除失败");
}else {
cImgService.deleteList(ids);//删除的方法
jsonObject.put("msg", "删除成功");
}
OutUtil.print(jsonObject, response);
return null;
}
/**
* 删除一条信息
* @param id
* @return
*/
@RequestMapping("deleteById")
@ResponseBody
public String deleteById(Integer id,HttpServletResponse response) {
JSONObject jsonObject=new JSONObject();
//判断取值id是否为null，为null则表明删除失败！
if(id==null) {
jsonObject.put("msg", "删除失败");
}else {
cImgService.deleteById(id);
jsonObject.put("msg", "删除成功");
}
OutUtil.print(jsonObject, response);
return null;
}
}
四、service和serviceImpl
public interface CoverImgService {
//批量删除
void deleteList(Integer[] ids);
//删除一条
void deleteById(Integer id);
}
@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);
}
public void deleteById(Integer id) {
//删除一条
cDao.deleteById(id);
}
}
五、Dao类
public interface CoverImgDao {
//批量删除
void deleteList(Integer[] ids);
//删除一条
void deleteById(Integer id);
//配置一对多
Cover getCoverImgByAd_id(int ad_id);
}
六、mapper.xml
<mapper namespace="cn.jbit.dao.CoverImgDao">
<!-- 这是一个封面图的mybaits的mapper文件 -->
<resultMap type="Cover" id="coverList">
<association property="admin" column="ad_id" select="cn.jbit.dao.AdminDao.getAdminByAd_id"></association>
<!-- 多对一的关联关联复杂类型association column="ad_id"外键 -->
</resultMap>
<!-- 双向一定都要写查询语句 -->
<select id="getCoverImgByAd_id" resultMap="coverList">
select * from cover where ad_id=#{ad_id}
</select>
<!-- 批量删除封面图 -->
<delete id="deleteList">
delete from cover where cv_id in
<foreach collection="array" item="ids" open="(" separator=","
close=")">
#{ids}
</foreach>
</delete>
<!-- 删除一条信息 -->
<delete id="deleteById">
delete from cover where cv_id = #{id}
</delete>
</mapper> 七、js
/*封面图-删除--后台系统代码*/
function cImg_del(event){
var id = $(event).parents().children("td").eq(1).html();//获取页面该行的id
layer.confirm('是否删除吗？',function(index){
//确定执行删除
$.ajax({
url: 'cover/deleteById.do?id='+id,
type:'post',
dataType:'json',
success:function (r) {
layer.msg(r.msg,{icon:1,time:1000});//打出提示信息
$(event).parent().parent().remove();//当前点击的标签的父母tr移除
},
'error':function () {
layer.msg('系统错误',{icon:1,time:1000});
}
});
});
}
/*封面图-批量删除*/
function delCoverImg(){
// 判断是否至少选择一项
var checkedNum = $("input[name='check_id']:checked").length;
if(checkedNum == 0) {
layer.msg("请选择至少一项！",{icon:1,time:1000});//打出提示信息
return;
}
layer.confirm('确认删除吗？',function(index){
// 批量选择
var checkedList = new Array(); //定义一个数组
$("input[name='check_id']:checked").each(function() {
//循环遍历，push()方法可向数组的末尾添加一个或多个元素，并返回新的长度
checkedList.push($(this).val()); //复选框的值是已经取到的数据id--$(this).val()
});
$.ajax({
url:'cover/deleteByIds.do',
type:'post',
data: {'ids':checkedList.toString()},
dataType:'json',
success:function (res) {
layer.msg(res.msg,{icon:1,time:1000});//打出提示信息
$("input[name='check_id']:checked").each(function() {
//删除成功之后，将选中的所属的tr移除
$(this).parent().parent().remove();
});
$("input[name='ad_all']").removeAttr("checked");
},
'error':function () {
layer.msg('系统错误',{icon:1,time:1000});
}
});
});
}我是菜鸟，就不写解释了，太忙~