功能需求

①用户在市场活动主页面,选择要删除的市场活动,点击"删除"按钮,弹出确认窗口;

②用户点击"确定"按钮,完成删除市场活动的功能.

③*每次至少删除一条市场活动

④*可以批量删除市场活动

⑤*删除成功之后,刷新市场活动列表,显示第一页数据,保持每页显示条数不变

⑥*删除失败,提示信息,列表不刷新

流程图

 代码实现

市场活动的全选和取消全选1

            //4.全选： 按钮添加单击事件$("#chckAll").click(function () {//判断 如果全选按钮选中，列表都选中checkbox// if(this.checked==true){//     $("#tBody input[type='checkbox']").prop("checked",true); //获取表格列表下的checkbox// }else{//     $("#tBody input[type='checkbox']").prop("checked",false); //获取表格列表下的checkbox// }$("#tBody input[type='checkbox']").prop("checked",this.checked);});

删除活动代码实现

一、ActivityMapper

1.ActivityMapper接口添加删除方法

    /***根据id数组批量删除*/int deleteActivityByIds(String[] id);

2.写ActivityMapper的映射文件

<foreach>标签进行循环遍历，然后进行字符串的拼接

• collection代表遍历的类型，数组是array，集合是list
• item 把每次遍历的结果存放这里
• #{id} 把每一个id的值获取

    <!--int deleteActivityByIds(String ids);--><delete id="deleteActivityByIds">deletefrom tbl_activitywhere id in <foreach collection="array" item="id" separator="," open="(" close=")">#{id}</foreach></delete>

二、ActivityService

	/*** 根据id删除*/int deleteActivityByIds(String[] id);

	@Overridepublic int deleteActivityByIds(String[] id) {return activityMapper.deleteActivityByIds(id);}

三、ActivityController

@RequestMapping("/workbench/activity/deleteActivityIds.do")public @ResponseBodyObject deleteActivityIds(String[] id) {ReturnObject returnObject = new ReturnObject();try {// 调用service方法int ret = activityService.deleteActivityByIds(id);if (ret > 0) {returnObject.setCode(Contants.RETURN_OBJECT_CODE_SUCCESS);} else {returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);returnObject.setMessage("系统忙，请稍后再试...");}} catch (Exception e) {e.printStackTrace();returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);returnObject.setMessage("系统忙，请稍后再试...");}return returnObject;}

四、前端

发请求

处理响应

1.用户点击“删除按钮”，给删除按钮添加点击事件

 2.删除按钮绑定单击事件

$("#deleteBtn").click(function () {
....
}

2.1获取列表中选中的checkbox

 var checkedIds = $("#tBody input[type='checkbox']:checked");if (checkedIds.size() == 0) {alert("请选择删除的事件");return;}

2.2遍历checkbox 获取事件id的值

// this 就是每次遍历的值
// 把id=xxx&id=xxx...&id=xxx发送到后台

                //5.2获取id--遍历数组// this 就是每次遍历的值// 把id=xxx&id=xxx...&id=xxx发送到后台var ids="";$.each(checkedIds,function () {ids+="id="+this.value+"&";});// 删除结尾的&ids=ids.substr(0,ids.length-1);

2.3后台发送请求

ajax向后台发送请求data参数的格式

①一个参数名对应一个参数值

data:{

K:V

}

②一个参数名对应多个参数值

data:k1=v1&k2=v2&k3=v3...

K都是id ，后台用数组id接收

③提交字符串数据和二进制数据

data:FormData对象

  $.ajax({url:'workbench/activity/deleteActivityIds.do',data:ids,type:'post',//响应dataType:'json',success:function (data) {if (data.code=='1'){//删除成功//刷新queryActivityByConditionForPage(1,10);}else {alert(data.message);}}});

2.4提示信息：是否删除

 if (window.confirm("确定删除吗？")) {
...
}

完整的js

         //5.删除： 删除按钮$("#deleteBtn").click(function () {// 收集参数// 5.1获取列表中选中的checkboxvar checkedIds = $("#tBody input[type='checkbox']:checked");if (checkedIds.size() == 0) {alert("请选择删除的事件");return;}if (window.confirm("确定删除吗？")) {//5.2获取id--遍历数组// this 就是每次遍历的值// 把id=xxx&id=xxx...&id=xxx发送到后台var ids = "";$.each(checkedIds, function () {ids += "id=" + this.value + "&";});// 取出&ids = ids.substr(0, ids.length - 1);//5.3发送请求$.ajax({url: 'workbench/activity/deleteActivityIds.do',data: ids,type: 'post',//响应dataType: 'json',success: function (data) {if (data.code == '1') {//删除成功//刷新queryActivityByConditionForPage(1, 10);} else {alert(data.message);}}});}});