商品信息单个删除和批量删除

商品信息删除

1.根据ID发送ajax请求删除商品信息

button按钮

<button type="button" onclick="deleteProd(${p.pId})" class="btn btn-default">删除</button>

按钮单击事件

<%--    使用ajax发送删除商品信息 --%>
function deleteProd(pId) {
    alert(pId);
    $.ajax({
        url:"${pageContext.request.contextPath}/prod/delete.action",
        data:{pId:pId},
        type: "post",
        dataType:"text",// 提示是否删除成功
        success:function (msg) {
            // 由于删除并没有刷新
            alert(msg);
        //    重新刷新容器
            $("#table").load("http://localhost:8080/mall_war_exploded/admin/product.jsp #table");
        }
    });
}

controller层

注意是：由于发送的异步ajax请求，删除后并没有刷新整合页面，为给浏览器回响数据，所以不能直接返回@RequestBody回显示数据，需要重新跳转到新的controller控制器方法上

  // 根据ID删除商品信息，是根据ajax异步，完成删除后，不能直接使用@RequestBody
    // 需要跳转分页的ajax请求上
    @RequestMapping("/delete")
    // 删除的完成后转发到
    public String delete(int pId,Model model){
        System.out.println(pId);
        int delete = 0;
        try {
            delete = service.delete(pId);
        } catch (Exception e) {
            e.printStackTrace();
        }
        if (delete>0){
            model.addAttribute("msg","删除成功！");
        }else {
            model.addAttribute("msg","删除失败！");
        }

        return "forward:/prod/deleteAjaxSplit.action";
    }

    // 删除成功后
    @RequestMapping(value = "/deleteAjaxSplit",produces = "text/html;charset=UTF-8")
    @ResponseBody// 表示回显数据提示是否删除成功
    public Object deleteAjax(HttpServletRequest request){
        // 查询第一页信息
        PageInfo split = service.split(1, PAGE_SIZE);
        // 由于使用的异步ajax请求，所以需要将数据存放在session作用域中
        request.getSession().setAttribute("info",split);
        // 返回是否删除成功
        return request.getAttribute("msg");
    }

service接口

    // 根据ID删除信息
    int delete(Integer id);

service接口实现类

    // 删除商品信息
    @Override
    public int delete(Integer id) {
        return mapper.deleteByPrimaryKey(id);
    } 

	// 删除商品信息
    @Override
    public int delete(Integer id) {
        return mapper.deleteByPrimaryKey(id);
    }

2.批量删除

页面

当点击全选按钮时，所有复选框都被选中状态

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

<%--全选复选框功能实现--%>
function allClick() {
    // 获得当前点击后全选按钮的状态
    var flag = $("#all").prop("checked");
    // 将此状态赋值给下面一个复选框
    $("input[name='ck']").each(function () {
        this.checked = flag;
    });
}

单复选框

<input type="checkbox" name="ck" id="ck" value="${p.pId}" onclick="ckClick()">

// 单个复选框点击事件改变全选的功能
function ckClick() {
    // 得到下面所有复选框个数
    var fiveLength = $("input[name='ck']").length;
    // 获取被选中的个数
    var checkedLength = $("input[name='ck']:checked").length;
    // 判断是否全被选中，如果是全被选中，则改变全选框为选中，否则为不选中状态
    if (fiveLength==checkedLength){
        $("#all").prop("checked",true);
    }else {
        $("#all").prop("checked",false);
    }
}

当点击批量按钮时，提交被选中的ID，发送异步ajax请求

<input type="button" class="btn btn-warning" id="btn1" value="批量删除" onclick="deleteBatch()">

//    批量删除
    function deleteBatch() {
        // 得到所有被选中的复选框对象，根据长度进行判断
        var cks = $("input[name='ck']:checked");
        // 判断是否有复选被选中，如果没有则提示“请先选择将要删除的商品”
        if (cks==0){
            alert("请先选择将要删除的商品！");
        }else {
            var str = "";// 用于字符串ID的拼接
            var pid = "";//用于接收每一个ID的值用于拼接

            if (confirm("您确定要删除"+cks.length+"条商品吗？")){
                // 对cks进行遍历
                $.each(cks,function () {
                    // 获取每个 复选框对象的ID值
                    pid = $(this).val();
                    // 判断是否为空，防止出错
                    if (pid!=null){
                        //进行字符串拼接
                        str = str + pid + ",";
                    }
                });


                // 发送ajax请求
                $.ajax({
                    url:"${pageContext.request.contextPath}/prod/deleteBatch.action",
                    data:{pids:str},
                    type:"post",
                    dataType: "text",
                    success:function (msg) {
                        alert(msg);//批量删除是否成功提示
                        $("#table").load("http://localhost:8080/mall_war_exploded/admin/product.jsp #table");
                    }
                });
            }
        }
    }

mapper层

    // 批量删除
    int deleteBatch(String[] pids);

<!--
    // 进行批量删除
    int deleteBatch(@Param("pids") String[] pids);
-->
  <delete id="deleteBatch">
    delete from t_product_info 
    <where>
      <if test="pids!='' and pids!=null">
        p_id in (
            <foreach collection="pids" item="pid" separator=",">
              #{pid}
            </foreach>
        )
      </if>
    </where>
  </delete>

service接口

    // 批量删除
    int deleteBatch(String[] pids);

service接口实现类

    // 批量删除
    @Override
    public int deleteBatch(String[] pids) {
        return mapper.deleteBatch(pids);
    }

controller层

    // 删除成功后
    @RequestMapping(value = "/deleteAjaxSplit",produces = "text/html;charset=UTF-8")
    @ResponseBody// 表示回显数据提示是否删除成功
    public Object deleteAjax(HttpServletRequest request){
        // 查询第一页信息
        PageInfo split = service.split(1, PAGE_SIZE);
        // 由于使用的异步ajax请求，所以需要将数据存放在session作用域中
        request.getSession().setAttribute("info",split);
        // 返回是否删除成功
        return request.getAttribute("msg");
    }

    // 进行批量删除
    @RequestMapping("/deleteBatch")
    public String deleteBatch(String pids, Model model){
        // 对象接收到的pids进行分割成String[]数组
        String[] split = pids.split(",");
        System.out.println(Arrays.toString(split));
        int i = 0;
        try {
            i = service.deleteBatch(split);
            if (i>0){
                // 说明批量删除成功
                model.addAttribute("msg","批量删除成功！");
            }else {
                // 说明批量删除失败
                model.addAttribute("msg","批量删除失败！");
            }
        } catch (Exception e) {
            e.printStackTrace();
            model.addAttribute("msg","此商品不删除！");
        }
        return "forward:/prod/deleteAjaxSplit.action";
    }