• 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>

      

  • 相关阅读:
    NFS服务
    rsync
    jquery animate
    一个简单的widget
    EXTJS学习(一)
    jquery+linq制作博客(二)
    EXTJS学习(二)Message
    Jquery ui widget中的_create(),_init(),destroy()
    Jquery ui widget开发
    Json.net简单用法
  • 原文地址:https://www.cnblogs.com/lcsin/p/11714361.html
Copyright © 2020-2023  润新知