功能需求
①用户在市场活动主页面,选择要删除的市场活动,点击"删除"按钮,弹出确认窗口;
②用户点击"确定"按钮,完成删除市场活动的功能.
③*每次至少删除一条市场活动
④*可以批量删除市场活动
⑤*删除成功之后,刷新市场活动列表,显示第一页数据,保持每页显示条数不变
⑥*删除失败,提示信息,列表不刷新
流程图
代码实现
市场活动的全选和取消全选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);}}});}});