zoukankan      html  css  js  c++  java
  • (转)springboot + ajax + mybatis 实现批量删除

    实现思路:

      1. checkbox全选获取批量删除的id数组

      2. ajax以字符串的形式将id数组传给控制器

      3. 控制器将字符串分割成List数组作为参数传给mapper

    具体代码:

      1. 前端代码

    复制代码
    <table>
        <thead>
            <tr>
                <th>#</th>
                <th>id</th>
                <th>文件名</th>
                <th>文件类型</th>
                <th>上传时间</th>
                <th>上传用户</th>
                <th>文件大小</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="resource:${resources}">
                <td>
                    <input type="checkbox" name="checkId" id="checkId" th:value="${resource.id}"/>
                </td>
                <td th:text="${resource.id}">Row 1 Data 1</td>
                <td th:text="${resource.fileName}">Row 1 Data 2</td>
                <td th:text="${resource.fileType}">Row 1 Data 1</td>
                <td th:text="${resource.fileTime}">Row 1 Data 2</td>
                <td th:text="${resource.fileUploader}">Row 1 Data 1</td>
                <td th:text="${resource.fileSize}">Row 1 Data 2</td>
            </tr>
        </tbody>
    </table><br>
    <input type="checkbox"  name="selectAll" id="selectAll" onclick="selectAll(this);">全选&emsp;
    <button type="button"  onclick="deleteLogic();">批量删除</button>
    复制代码

      2. js代码

    复制代码
    /**
     * checkbox全选/全不全
     * @param checkbox
     */
    function selectAll(checkbox) {
        $('input[name="checkId"]').prop('checked', $(checkbox).prop('checked'));
    }
    
    /**
     * 批量删除
     */
    function deleteLogic() {
    
        var checkNum = $("input[name='checkId']:checked").length;
    
        if(checkNum==0){
            alert("至少选择一项");
            return;
        }
    
        if(confirm("确定要删除吗?")){
            var checkList = new Array();
            $("input[name='checkId']:checked").each(function () {
                checkList.push($(this).val())
            });
        }
        
        $.ajax({
            url:"/deleteAll",
            type:"post",
            data:{
                checkList:checkList.toString()
            },
            datatype:"json",
            success:function (data) {
                location.reload();
                alert("删除成功!")
            },
            error:function (msg) {
                alert("删除失败!")
            }
        })
    }
    复制代码

      3. Controller代码

    复制代码
    @PostMapping("/deleteAll")
    @ResponseBody
    public String deleteAll(String checkList){
    
        System.out.println("==>"+checkList);
    
        String[] strs = checkList.split(",");
        List<Integer> ids = new ArrayList<>();
    
        for(String str:strs){
            ids.add(Integer.parseInt(str));
        }
    
        resourcesService.deleteAll(ids);
    
        return "success";
    }
    复制代码

      4. mapper.xml代码

    复制代码
    <delete id="deleteAll" parameterType="list">
        delete from resources where id in
        <foreach collection="list" item="id" open="(" close=")" separator=",">
            #{id}
        </foreach>
    </delete>
  • 相关阅读:
    【模板】线段树
    【模板】快速幂
    【模板】SPFA
    【模板】链式前向星
    C语言博客作业--函数嵌套调用
    C语言博客作业--结构体
    C博客作业--指针
    C语言博客作业--字符数组
    C语言博客作业--一二维数组
    C语言博客作业--函数
  • 原文地址:https://www.cnblogs.com/front-end-develop/p/13100767.html
Copyright © 2011-2022 走看看