删除功能

最新推荐文章于 2022-08-26 11:51:36 发布

weixin_33827731

最新推荐文章于 2022-08-26 11:51:36 发布

阅读量539

点赞数

文章标签： python javascript 后端 ViewUI

原文链接：https://my.oschina.net/mondayer/blog/3035246

版权

2019独角兽企业重金招聘Python工程师标准>>>

单个删除

在list.jsp中的<a href="javascript:void(0);" class="delete">删除</a>。发起删除请求。其中，class="delete" 这里定义了一个 class 属性。这里的class不是真的要写css代码，而是一个【标记】属性。什么意思？看后面的代码。

删除事件：

 //单个删除
$(".delete").click(function(){
	var id= $(this).parents("tr").find("td:eq(1)").text();
	if (confirm("确定删除ID为" + id + "的记录吗？")) {
	    location.href = "${ctx}/emp/delete/" + id;
	}
});

通过$(this).parents("tr").find("td:eq(1)").text()找到删除按钮所在行的id值。

全选/全不选

id="checkAll" 表示全选的复选框。
class="checkItem" 也是一个标识，用来处理事件的。

全选事件：

//点击全选框，选中其他复选框
$("#checkAll").click(function () {
	$(".checkItem").prop("checked", $(this).prop("checked"));
});

jQuery的attr和prop的区别：
只具有true和false两个属性的属性，如 checked、selected、disabled 使用prop()，其他的使用attr()。

当页面上单独的复选框都选中，全选框也要被选中：

 //选中其他复选框满五，全选框被选中
$(".checkItem").click(function () {
    //判断当前选择中的元素是否5个
    var flag = $(".checkItem:checked").length == $(".checkItem").length;
    $("#checkAll").prop("checked", flag);
});

这两个事件加在一起，才是完整的【全选/全不选】。

批量删除

 //批量删除
$("#batchDel").click(function () {
    var ids = "";   //拼接id
    var count = 0;  //统计选中的个数
    $.each($(".checkItem:checked"), function (index, item) {
        ids += item.value + "-";
        count++;
    });
    ids = ids.substring(0, ids.length - 1);
    if (count > 0) {
        if (confirm("确定删除ID为" + ids + "的记录吗？")) {
            location.href = "${ctx}/emp/delete/" + ids;
        }
    } else {
        alert("请选中要删除的记录！");
    }
});

后端的处理：单个删除/批量删除写在一个方法中。

@RequestMapping("/emp/delete/{ids}")
public String delete(@PathVariable String ids) {
    //批量刪除
    if (ids.contains("-")) {
        List<Long> list = new ArrayList<>();
        String[] arr = ids.split("-");
        for (String str : arr) {
            //类型转换
            Long id = Long.parseLong(str);
            list.add(id);
        }
        empService.batchDelete(list);
    }
    //单个刪除
    else {
        //类型转换
        Long id = Long.parseLong(ids);
        empService.deleteEmp(id);
    }
    return "redirect:/emps";
}

批量删除的业务方法：

public void batchDelete(List<Long> ids) {
    EmpExample example = new EmpExample();
    example.createCriteria().andIdIn(ids);
    empMapper.deleteByExample(example);
}

转载于:https://my.oschina.net/mondayer/blog/3035246