SSM AJAX批量删除

1.使用jquery全选按钮功能实现

   <input type="checkbox" id="all" onclick="allClick()" style="margin-left: 50px">&nbsp;&nbsp;全选

1）获取全选复选框的状态 看是否已经选中
使用 id选择器选择其状态
2) 将此状态赋值给每个商品列表里的复选框 (就是点了全选复选框后 那几个复选框全部选中或不选)
这是我另外几个选择框 <input type="checkbox" name="ck" id="ck" value="${p.pId}" onclick="ckClick()">
因为我的选择框是通过foreach 循环来创建的所以他们共有同一个name属性 所以通过each遍历来给他们赋状态

 function allClick() {
        //取得全选复选框的选中未选 中状态
        var ischeck=$("#all").prop("checked");
        //将此状态赋值给每个商品列表里的复选框
        $("input[name=ck]").each(function () {
            this.checked=ischeck;
        });
    }

2.需要实现另外几个复选框对全选按钮的影响 比如 你下面有一个未勾选 那你的全选按钮就不能是选中状态
通过当前选中的复选框的数量 与页面中复选框的数量进行比较 相等则全选是选中的否则是不选中的

    function ckClick() {
        //取得所有name=ck的被选中的复选框 过滤只有是checked的
        var length=$("input[name=ck]:checked").length;
//取得所有name=ck的复选框
        var len=$("input[name=ck]").length;
        //比较
        if(len == length){
                  //如果数量相等把全选按钮赋值为checked
            $("#all").prop("checked",true);
        }else
        {
            $("#all").prop("checked",false);
        }
    }

3.Dao(mapper) 层创建mapper接口

这里我们是通过id 来选择删除的内容 所以传入一个字符数组

 int deleteBatch(String []  ids);

4.创建删除的动态sql语句

  <!--  int deleteBatch(String []  ids); -->
  <delete id="deleteBatch">
    delete from product_info where p_id in
    <foreach collection="array" item="pid" separator="," open="(" close=")">
     #{pid}
    </foreach>
  </delete>

5.创建service 接口

  //批量删除商品
  int deleteBatch(String []ids);

6.业务逻辑层

	@Override
	public int deleteBatch(String[] ids) {
		
		return p.deleteBatch(ids);
	}

7.控制层
我们上面的方法都是利用字符数组进行判断删除哪些数据的但是从页面传递到是字符串 我们需要先把页面传来的 例如
pid=1,4,5 这种的字符串转换成字符数组然后再进行操作 其次 在这里我们虽然是ajax请求 但是我页面数据发生变化后需要重新发送一遍刷新页面的请求才会显示最新的数据信息 所以我们这里需要专门创建一个请求来让他执行删除后的页面数据显示

@RequestMapping("/deleteBath")
public String deleteBath(String pids,HttpServletRequest resq){
	//这里的pids  是页面传来的 如1,4,5 这种类型的我们需要给他转变成字符串数组
String []pid =pids.split(",");
int num =p.deleteBatch(pid);
	try {
		if(num>0){
			resq.setAttribute("msg", "批量删除成功");
		}
		else{
			resq.setAttribute("msg", "批量删除失败");
		}
	} catch (Exception e) {
		// TODO Auto-generated catch block
		resq.setAttribute("msg", "当前商品不可删除！");
	}
	
	 return "forward:/prod/deleteAjaxSplit.action";
}
 

@ResponseBody
@RequestMapping(value="/deleteAjaxSplit",produces="text/html;charset=UTF-8")
public  Object  deleteAjaxSplit(HttpServletRequest req){
  //取得第一页数据
	System.out.println("分页");
	 PageInfo splitPage = p.splitPage(1, 5);
	 req.getSession().setAttribute("info", splitPage);
	return req.getAttribute("msg");
}

8.批量删除的页面操作
1）得到所有被选中复选框的对象，根据其长度判断是否有选中商品
2）如果有选中的商品，则获取其value的值进行字符串拼接
3）发送ajax请求进行批量删除的提交

 function deleteBatch() {

            //取得所有被选中删除商品的pid
            var zhi=$("input[name=ck]:checked");
            var str="";
            var id="";
            if(zhi.length==0){
                alert("请选择将要删除的商品！");
            }else{
                // 有选中的商品，则取出每个选 中商品的ID，拼提交的ID的数据
                if(confirm("您确定删除"+zhi.length+"条商品吗？")){
                //拼接ID
                    $.each(zhi,function (index,item) {

                        id=$(item).val(); //每一个被选中的value值
                        alert(id);
                        //进行非空判断
                        if(id!=null)
                            str += id+",";  //22,33,44
                    });
                       $.ajax({
                    	url:"${pageContext.request.contextPath}/prod/deleteBath.action",
                    	data:{"pids":str},
                    	type:"post",
                    	dataType: "text",
                        success: function(msg){
                        alert(msg);	
                        //将页面上显示商品数据的容器重新加载
                        $("#table").load("${pageContext.request.contextPath}/admin/product.jsp #table");
                        }
                    	   
                    	   
                       });
                }
        }
    }