checkbox多选，单选删除详解

红太狼 2022-05-18 02:28 704阅读 0赞

批量删除的功能呢，首先前台页面可以想到使用checkbox来做，这里后台数据库其实有两种删除的方式，如下：

![这里写图片描述][SouthEast]

但是不管数据库以哪种形式的sql删除，想要批量删除，那么前台传到后台的id肯定是多个哟！！！

1、下面就正式开如吧，下面是前台代码片段，迭代的时候取得它的索引号：这个索引是从0开始的，如果想要1，那么就+1就好啦—-$\{st.index+1\}(如下图：)

![这里写图片描述][SouthEast 1]

当然啦，上面图片的情况是你是需要手动+1的，你也可以使用另一种方法，不需要+1，它和$\{st.index+1\}效果是一样的呢，如下图:

![这里写图片描述][SouthEast 2]

2、接下来呢，页面需要的效果，点击全选按钮，则全选，再点击一次则取消全选；当所有子选择按钮都选中，则全选按钮选中，哪怕有一个子选择按钮没有选中，全选按钮就不会选中:

js代码如下：

3、前台值传到后台去呢：   
好了，前台拿到所选择的input,有可能有多个，然后送到后台去啦，这里有两种写法：

**实现方法一：**   
1、看到那个

/**为删除按钮绑定事件*/
                $("#btn").click(function(){
                    /**获取下面选中的checkbox*/
                    var checkedbox = $("input[id^='box_']:checked");
                    if(checkedbox.length == 0){
                        alert("请选择要删除的部门！！！");
                    }else{
                        if(confirm("你确定要删除吗？？？")){
                            var ids = new Array();
                            checkedbox.each(function(){
                                ids.push(this.value);
                            });
                            alert(ids);
                        }
                    }
                });

——当然上面的拿值方式只是其中一种呢，上面的拿值方法也可以使用下面的map方法来实现呢……

****实现方法二：****
    /**为删除按钮绑定事件*/
                $("#btn").click(function(){
                    /**获取下面选中的checkbox*/
                    var checkedbox = $("input[id^='box_']:checked");
                    if(checkedbox.length == 0){
                        alert("请选择要删除的部门！！！");
                    }else{
                        if(confirm("你确定要删除吗？？？")){
                               /**
                                                              如下面，如果调用map方法，
                                                               会把函数里面的返回值作为jquery对象--res返回
                                                              注意，这里的res.toArray()等同于res.toArray().join(",");
                                                            它默认就是这样做的呢，这个需要记住嘛
                               */
                           var res = checkedbox.map(function(){
                                 return this.value;
                             });
                            alert(res);
                            alert(res.toArray());
                            alert(res.toArray().join(","));
                        }
                    }
                });

4、然后通过以下方法把ids传到后台去呢！

![这里写图片描述][SouthEast 3]

window.location.href="${path}/identity/deleteDept.action?ids="+res.toArray().join(",");

在这里配上前台完整jsp页面：

<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <%@ taglib prefix="s" uri="/struts-tags"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
    <c:set var="path" value="${pageContext.request.contextPath}"></c:set>
    <html>
    <head>
        <title>部门管理</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="${path}/css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="${path}/css/bootstrap-responsive.min.css" />
        <link rel="stylesheet" type="text/css" href="${path}/css/style.css" />
        <link rel="stylesheet" type="text/css" href="${path}/css/pager.css" />
        <script type="text/javascript" src="${path}/js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="${path}/js/jquery-migrate-1.2.1.min.js"></script>
        <script type="text/javascript" src="${path}/js/bootstrap.min.js"></script>
        <style type="text/css">
            body {
                padding-bottom: 40px;
            }
            .sidebar-nav {
                padding: 9px 0;
            }
    
            @media (max-width: 980px) {
                /* Enable use of floated navbar text */
                .navbar-text.pull-right {
                    float: none;
                    padding-left: 5px;
                    padding-right: 5px;
                }
            }
        </style>
    
        <script type="text/javascript">
            $(function(){
                /**为全选绑定点击事件*/
                $("#checkAll").click(function(){
                    /**获取其下面的所有checkbox  
                      * 注意这里的input[id^='box_']表示
                        获取input标签，它的id都是以box_开头的，的这一系列的节点
                        这里的^表示的就是开头的意思.
                        这里的attr("checked",this.checked)还需要解释一下，特别是
                        this.checked，这里的this表示的是全选的那个checkbox(#checkAll)的dom元素，
                        也就是拿到这个全选的checkAll的checkbox的checked属性给它就好了
                    */
                    $("input[id^='box_']").attr("checked",this.checked);
                });
    
    
    
                /**还需要为每一个子checkbox绑定事件呢 
                   ，当下面的子checkbox全部都选中的时候，上面的全选按扭
                   也应该要全部选中
                */
                $("input[id^='box_']").click(function(){//点击每一个子checkbox，都会触发这个事件
    
                    /**获取到下面所有checkbox*/
                    var boxs = $("input[id^='box_']");
                    /*
                      * 下面是为checkAll设置它是否checked属性
                        boxs.length表示的是所有子checkbox的个数
                        boxs.filter(":checked").length表示是过滤出所有
                               子checkbox当中已经被点击选中的checkbox的个数，如果个数相等，
                               那么就会返回true,如果不相等，就返回false
                    */
                    $("#checkAll").attr("checked",boxs.length == boxs.filter(":checked").length);
                });
    
                /**为删除按钮绑定事件*/
                $("#btn").click(function(){
                    /**获取下面选中的checkbox*/
                    var checkedbox = $("input[id^='box_']:checked");
                    if(checkedbox.length == 0){
                        alert("请选择要删除的部门！！！");
                    }else{
                        if(confirm("你确定要删除吗？？？")){
                               /**
                                                              如下面，如果调用map方法，
                                                               会把函数里面的返回值作为jquery对象--res返回
                                                              注意，这里的res.toArray()等同于res.toArray().join(",");
                                                            它默认就是这样做的呢，这个需要记住嘛
                               */
                           var res = checkedbox.map(function(){
                                 return this.value;
                             });
    
                            window.location.href="${path}/identity/deleteDept.action?ids="+res.toArray().join(",");
                        }
                    }
                });
    
    
            });
        </script>
    </head>
    <body>
         <form class="form-inline definewidth m20" 
              action="#" method="post">
            <a class="btn btn-primary" href="${path }/identity/showAddDept.action">添加部门</a>
            <input class="btn btn-primary" type="button" id="btn" value="删除"/>
         </form>
    
    
        <table class="table table-bordered table-hover definewidth m10">
            <thead>
                <tr>
                    <th width="5%"><input type="checkbox" id="checkAll"/>全选</th>
                    <th>部门编号</th>
                    <th>部门名称</th>
                    <th>部门备注</th>
                    <th>操作</th>
                </tr>
            </thead>
            <s:iterator value="depts" status="st">
                 <tr>
                    <td><input type="checkbox" value="${id }" id="box_${st.index+1 }"/>${st.count }</td>
                    <td><s:property value="id"/></td>
                    <td><s:property value="name"/></td>
                    <td><s:property value="remark"/></td>
                    <td>
                       <a href="${path }/identity/showUpdateDept.action?dept.id=${id}">修改</a>
                    </td>   
    
                </tr>   
           </s:iterator>
        </table>
        
        <itcast:pager pageIndex="${pageModel.pageIndex }"
                      pageSize="${pageModel.pageSize }" 
                      recordCount="${pageModel.recordCount }"
                      submitUrl="${path}/identity/selectDept.action?pageModel.pageIndex={0}"/>
    </body>
    </html>

5、接下来就是从后台拿到ids，从而来进行批量删除啦……

这里使用的是struts2控制层框架，看这里，在action层中设置了一个ids的属性，注意呢，这里的属性名一定要和前台传过来的属性名一样啊，同时在这里给它get，set方法，这里的话，就可以拿到ids的值了，如下图：

![这里写图片描述][SouthEast 4]

然后再调用identityService的deleteDept方法(this.identityService.deleteDept(ids.split(“,”));)

进行删除如下图：

![这里写图片描述][SouthEast 5]

注意呢，上图中注释掉的部分其实进行的是单个删除，这样做的效率非常低呢，   
另一种方式就是批量删除呢(this.deptDao.deleteDepts(split);)

再看看它（这种高效率的方式）是如何自己来实现的吧，如下图：

![这里写图片描述][SouthEast 6]

上图就是对sql语句进行拼装，自己编写呢，然后把拿到的ids传进去，最后调用bulkUpdate()方法进行批量删除呢

bulkUpdate()它的实现是这样的：

![这里写图片描述][SouthEast 7]

[SouthEast]: /images/20220518/44bce38c79864501a4bce5226d5cda58.png
[SouthEast 1]: /images/20220518/d2e450a504ae45989b044f8b3a58972d.png
[SouthEast 2]: /images/20220518/d3ba0ce8a8664b76954b13f6ef203ecd.png
[SouthEast 3]: /images/20220518/1a7535870ee04f278da6228dce7fa319.png
[SouthEast 4]: /images/20220518/deff0cedcc084f119d7e9e3fef619095.png
[SouthEast 5]: /images/20220518/0f655ea301ce4b19902fb90d0418b9a0.png
[SouthEast 6]: /images/20220518/c143932c023a4c32b6668f461b594818.png
[SouthEast 7]: /images/20220518/ed3ee049d2fb447796a07f962b299673.png