SSM框架项目【米米商城】55-69 单个删除、批量删除

开始时间：2022-03-06
课程链接：米米商城

商品删除工作

单个商品删除

按照惯例，先写service里面

   @Override
    public int delete(int pid) {
        return productInfoMapper.deleteByPrimaryKey(pid);
    }

再写controller
delete

   @RequestMapping("/delete")
    public String delete(int pid, HttpServletRequest request) {
        int num = -1;
        try {
            num = productInfoService.delete(pid);
        } catch (Exception e) {
            e.printStackTrace();
        }
        if (num > 0) {
            request.setAttribute("msg", "删除成功");
        } else {
            request.setAttribute("msg", "删除失败");
        }
        //删除结束后跳到分页显示
        return "forward:/prod/deleteAjaxSplit.action";
    }

按理说应该直接返回Ajax翻页的功能，但我们在删除时，一定要弹出提示信息，删除成功就要弹窗告诉删除成功，删除失败也要告诉用户，不然对用户使用很不友好
也就是说，我们要把得到的提示信息也通过作用域返回到前端去
那么下面的代码就不适用了

   //Ajax翻页处理
    @ResponseBody
    @RequestMapping("/ajaxSplit")
    public void ajaxSplit(int page, HttpSession session) {
        PageInfo info = productInfoService.splitPage(page, PAGE_SIZE);
        //刷新时session中携带的info
        session.setAttribute("info", info);
    }

因此考虑换一个写法

    @ResponseBody
    @RequestMapping(value = "/deleteAjaxSplit", produces = "text/html;charset=UTF-8")
    public Object deleteAjaxSplit(HttpServletRequest request) {
        //取得第一页的数据，删除后返回到第一页
        PageInfo pageInfo = productInfoService.splitPage(1, PAGE_SIZE);
        request.getSession().setAttribute("info", pageInfo);
        return request.getAttribute("msg");
    }

将提示信息返回过去

对应前端界面product.jsp
通过主键来删除

<button type="button" class="btn btn-warning" id="mydel"
         onclick="del(${p.pId})">删除
</button>

链接到的就是我们写的delete.action

function del(pid){
        if(confirm("您确定删除吗？")){
           $.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/mimi_SSM/admin/product.jsp #table")
               }
           })
        }
    }

看看效果

批量删除功能的实现

实现全选复选框和单个复选框的关联

全选勾上的时候，下面五个也勾上
全选取消，下面五个也取消
可以通过全选按钮是否选中，再将其选中状态赋值给下面五个复选框
而下面五个复选框，通过其name属性进行定位，再改变其checked状态

function allClick() {
        //取得全选复选框的选中/未选中状态
        //这个prop方法源于jQuery包
        var flag = $("#all").prop("checked");

        //将此状态赋值给每个商品列表里的复选框,五个复选框的name属性都是ck
        //然后给每一个复选框赋值
        $("input[name=ck]").each(function () {
            this.checked = flag;
        });
    }

那我们还要实现一个功能
下面五个复选框，都处于选中时，全选框也变为选中，有一个没选中时，那全选框就是未选中状态
我们可以通过获取被选中的数量，与总共的复选框的数量进行对比，如果两者相等，就选中全选框的checked，否则不选中

    function ckClick() {
        //取得所有name=ck的被选中的复选框
        var length = $("input[name=ck]:checked").length;
        //取得所有name=ck的复选框
        var len = $("input[name=ck]").length;
        //比较
        if (len == length) {
            $("#all").prop("checked", true);
        } else {
            $("#all").prop("checked", false);
        }
    }

Mapper文件的配置
因为之前Mapper文件里面没有提供批量删除的接口，所以得自己补充上去

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

    <!--  //批量删除商品-->
    <!--  int deleteBatch(String []ids);  1,4,5  -->
    <delete id="deleteBatch">
        delete from product_info where p_id in
        //通过,来实现分割
        <foreach collection="array" item="pid" separator="," open="(" close=")">
            #{pid}
        </foreach>
    </delete>

批量删除的controller
删除都要给提示信息的

//加了这个注解，表示最后要从这里进行返回
    @ResponseBody
    @RequestMapping(value = "/deleteAjaxSplit", produces = "text/html;charset=UTF-8")
    public Object deleteAjaxSplit(HttpServletRequest request) {
        //取得第一页的数据，删除后返回到第一页
        PageInfo pageInfo = productInfoService.splitPage(1, PAGE_SIZE);
        request.getSession().setAttribute("info", pageInfo);
        return request.getAttribute("msg");
    }

@RequestMapping("/deleteBatch")
    public String deleBatch(String pids, HttpServletRequest request) {
        String[] ps = pids.split(",");

        try {
            //将字符串转为字符数组，再放进批量删除方法里面
            int num = productInfoService.deleteBatch(ps);
            if (num > 0) {
                request.setAttribute("msg", "批量删除成功");
            } else {
                request.setAttribute("msg", "批量删除失败");
            }
        } catch (Exception e) {
            request.setAttribute("msg", "当前商品不可删除");
        }
        return "forward:/prod//deleteAjaxSplit.action";
    }

这时候回到product.jsp中补充
将“批量删除”绑定事件

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

<script type="text/javascript">
    function mysubmit() {
        $("#myform").submit();
    }

获取删除 商品的id，并在删除时给出提示
如果没有选中任何商品，则提示要选择需要删除的商品

    //批量删除
    function deleteBatch() {

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

                    pid = $(this).val(); //22 33

                    //进行非空判断
                    if (pid != null)
                        str += pid + ",";  //22,33,44,
                    //这里的拼接不影响后面，因为传过去转为数据的时候
                    //是转成[22,33,44]的
                }); 

再通过Ajax异步上传进行转发到deleteBatch.action

                $.ajax({
                    url: "${pageContext.request.contextPath}/prod//deleteBatch.action",
                    //拼好的主键id
                    data: {"pids": str},
                    type: "post",
                    dataType: "text",
                    success: function (msg) {
                        alert(msg);
                        $("#table").load("http://localhost:8080/mimi_SSM/admin/product.jsp #table")
                    }
                })         
            }
        }
    }

看看效果

结束时间：2022-03-07