删除功能（Ajax版）

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

单个删除

删除按钮：

var delBtn = $("<a href='#' class='del'>删除</a>");

注意：

//此事件不可用
$(".del").click(function(){
	var id =$(this).parents("tr").find("td:eq(1)").text();
	alert(id);
});

以上这段代码不起作用的。因为，删除按钮是用DOM动态生成。 DOM生成的UI，需要如下代码绑定事件。

//单个删除事件
$(document).on("click", ".del", function () {
	var id = $(this).parents("tr").find("td:eq(1)").text();
	if (confirm("确定删除" + id + "吗？")) {
	    $.ajax({
            url: "${ctx}/emp/" + id,
    		type: "delete",
    		success: function (result) {
    		    if (result.code == 100) {
        			alert(result.msg);
        			//删除后跳转到当前页面
        			toPage(currentPage);
    		    }
    		}
	    });
	}
});

全选/全不选

与之前的写法一样

 //全选/全不选
$("#checkAll").click(function () {
    $(".checkItem").prop("checked", $(this).prop("checked"));
	//这里不能用attr
});

$(document).on("click", ".checkItem", function () {
    var flag = $(".checkItem:checked").length == $(".checkItem").length;
    $("#checkAll").prop("checked", flag);
    //这里不能用attr，只能用prop
});

批量删除

//批量删除事件
$("#batchDel").click(function () {
	var ids = ""; //保存拼接id
	var count = 0; //统计选中个数
	$.each($(".checkItem:checked"), function (index, item) {
	    ids += item.value + ",";
	    count++;
	});

	if (count == 0) {
	    alert("请选中要删除的记录");
	    return false;
	}

	ids = ids.substring(0, ids.length - 1);
	if (confirm("确定删除" + ids + "吗？")) {
	    $.ajax({
    		url: "${ctx}/emp/" + ids,
    		type: "delete",
    		success: function (result) {
    		    if (result.code == 100) {
                    alert(result.msg);
                    //删除后跳转到当前页面
                    toPage(currentPage);
                    //全选复选框变为全不选
                    $("#checkAll").prop("checked", false);
    		    }
    		}
	    });
	}
});

@ResponseBody
@RequestMapping(value="/emp/{ids}",method = RequestMethod.DELETE)
public Msg delete(@PathVariable  String ids){
	//批量删除
	if(ids.contains(",")){
	    String[] arr = ids.split(",");
	    List<Long> list = new ArrayList<>();
	    for (String e : arr) {
    		Long id = Long.parseLong(e);
    		list.add(id);
	    }
	    empService.batchDel(list);
	}
	//单个删除
	else{
	    Long id = Long.parseLong(ids);
	    empService.delele(id);
	}
	return Msg.success();
}

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