SSM框架+ajax实现批量删除

最新推荐文章于 2022-05-31 20:00:40 发布

Sisu.

最新推荐文章于 2022-05-31 20:00:40 发布

阅读量385

点赞数

本文链接：https://blog.csdn.net/L_Sisu/article/details/103298515

版权

SSM+ajax实现批量删除

mapper

<!--  批量删除  -->
    <delete id="batchdel" parameterType="string">
        delete from t_city where id in
        <foreach collection="array" item="id" open="(" separator="," close=")">
            #{id}
        </foreach>

    </delete>

mapper接口

void batchdel(String[] ids);

service层

service层接口

 // 批量删除
    void batchdel(String[] ids);

实现类

 // 批量删除
    @Override
    public void batchdel(String[] ids){
        this.cityMapper.batchdel(ids);
        this.featureMapper.batchdel(ids);
    }

controller层

    @ResponseBody
    @RequestMapping("batchdel.action")

    public String batchdel(String[] ids){

        this.cityServiceI.batchdel(ids);

        return "redirect:/city/findAll.action";
    }

controller层

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.2.min.js"></script>
</head>

<body>

<button onclick="toSave()">添加</button>
<button onclick="selectNotAll()">全不选</button>
<button onclick="ReverseSelect()">反选</button>
<button onclick="Batchdel()">批量删除</button>
<table border="1">
    <thead style="text-align: center">
    <tr>
        <td><a onclick="selectAll()">全选</a></td>
        <td>城市编号</td>
        <td>城市名称</td>
        <td>城市特色</td>
        <td>市长名称</td>
        <td>市长电话</td>
        <td>市长邮箱</td>
        <td>等级名称</td>
        <td>操作</td>

    </tr>
    </thead>

    <tbody style="text-align: center">
    <c:forEach items="${requestScope.cityVoList}" var="c">
        <tr>
            <td><input type="checkbox" name="cid" value="${c.id}"></td>
            <td>${c.id}</td>
            <td>${c.city_name}</td>
            <td>
                <c:forEach items="${c.features}" var="f">
                    ${f.fname}
                </c:forEach>
            </td>
            <td>${c.name}</td>
            <td>${c.tel}</td>
            <td>${c.email}</td>
            <td>${c.tbType.tname}</td>
            <td>
                <a onclick="queryById(${c.id})">编辑</a>
                <a onclick="delById(${c.id})">删除</a>
            </td>
        </tr>

    </c:forEach>

    <tr>
        <td colspan="100">
            <button onclick="toPage(1)">首页</button>
            <button onclick="toPage(${pageUtils.prevPage})">上一页</button>
            <button onclick="toPage(${pageUtils.nextPage})">下一页</button>
            <button onclick="toPage(${pageUtils.lastPage})">尾页</button>
        </td>
    </tr>

    </tbody>
</table>


<script>

    function toPage(page) {
        window.location.href=${pageContext.request.contextPath}"/city/findAll.action?page="+page;
    }

    function queryById(id) {
        window.location.href=${pageContext.request.contextPath}"/city/findById.action?id="+id;
    }

    function toSave() {
        window.location.href=${pageContext.request.contextPath}"/city/toSave.action";
    }

    function delById(id) {
        window.location.href=${pageContext.request.contextPath}"/city/delById.action?id="+id;

    }

    // 全选

    function selectAll() {
        var cids=document.getElementsByName("cid");
        for (var i in cids){
            cids[i].checked=true;
        }
    }

    // 全不选
    function selectNotAll(){

        var cids = document.getElementsByName("cid");
        for(var i in cids){
            cids[i].checked=false;
        }
    }

    // 反选
    function ReverseSelect() {

        var cids = document.getElementsByName("cid");
        for (var i in cids) {
            if (cids[i].checked) {
                cids[i].checked = false;
            } else {
                cids[i].checked = true;
            }
        }
    }


    // 批量删除
    function Batchdel() {

        var Checkbox=false;//默认复选框为空

        $("input[name='cid']").each(function(){  //获取复选框节点id
            if (this.checked==true) {
                Checkbox=true;    //已勾选
            }
        });

        if (Checkbox){  //boolean值为true
            var t=confirm("您确认要删除选中的内容吗？");//弹出对话进行警告
            if (t==false) return false;    //不勾选不处理

            obj = document.getElementsByName("cid");//将复选框定义成一个jquery对象
            ids= [];//定义一个数组

            for(k in obj){  
                if(obj[k].checked) //选中的都放进 数组里
                    ids.push(obj[k].value);
            }

            $.ajax({//利用ajax发出请求
                type:"POST",//post类型
                url:"/city/batchdel.action?ids="+ids, //向Controller传输ids
                success:function(data){
                    alert("删除成功！");//返回ok后弹出一个对话框。
                    window.location.reload();

                }
            });
        }
        else{
            alert("请选择您要删除的内容!");//不勾选不提交，弹出警告框。
            return false;
        }
    }

</script>

</body>
</html>

Sisu.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SSM框架+ajax实现批量删除

SSM+ajax实现批量删除mapper <delete id="batchdel" parameterType="string"> delete from t_city where id in <foreach collection="array" item="id" open="(" sep...
复制链接

扫一扫