checkbox多选 ,单选删除详解

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

这里写图片描述

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

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

这里写图片描述

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

这里写图片描述

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

js代码如下:

<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);
            });


        });
    </script>

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传到后台去呢!

这里写图片描述

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的值了,如下图:

这里写图片描述

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

进行删除如下图:

这里写图片描述

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

再看看它(这种高效率的方式)是如何自己来实现的吧,如下图:

这里写图片描述

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

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

这里写图片描述

猜你喜欢

转载自blog.csdn.net/du5006150054/article/details/81263249