复选框批量删除-ajax-ssm项目(update实现假删除)_jsp+ajax多选删除

文末第7部分有效果演示！！！

目录

1.StudentMapper.xml文件中配置的sql语句

2.StudentMapper接口层

3.设计页面复选框全选与各自选择

4.通过js和ajax发出请求到Controller

5.StudentService层（编写实现类）

6.StudentController层

7.效果图演示

---

参考博客：(104条消息) ssm框架下进行的批量删除_liqz666的博客-CSDN博客_ssm批量删除

鉴于上述文章，我在自己的项目中成功实现批量删除，但其中做了很多细节上的修改，由此总结以下我自己的逻辑代码。

1.StudentMapper.xml文件中配置的sql语句

此处用的是假删除，即通过update语句将学生表中的sflag字段设置为1,1表示被删除，0为默认选项，表示正常的未被删除学生，所以，在进行查询所有显示时，需要通过以下方式来查询（带条件，判断sflag的值），而不是通过delete。

<select id="selectAllStudents" resultType="student">
   SELECT *
   FROM student s
       INNER JOIN class c ON s.scid = c.cid
        WHERE s.sflag = 0
</select>

所以在进行修改时，对应的sql语句如下，注意由于批量删除不确定传回来的id个数，所以使用数组类型进行删除。当然使用delete也是可以的，只需要更换一些sql语句即可，即delete from student where sid in...(同下)。

<update id="deleteSomeStudent" parameterType="java.lang.Integer">
        update student set sflag=1
            where sid in
        <foreach collection="array" item="sids" index="no" open="(" separator="," close=")">
            #{sids}
        </foreach>
</update>

2.StudentMapper接口层

@Repository
public interface StudentMapper {
    //省略了其他方法的定义
    Integer deleteSomeStudent(String[] sids);
}

3.设计页面复选框全选与各自选择

复选框简单样式：重点为第6行即第一个<th>与第18行即第一个<td>

<!-- 显示表格数据 -->
    <div class="row" >
        <div class="col-md-12">
            <table id="form" class="table table-striped" id="students_table">
                <tr>
                    <th style="width: 10px;"><input id="SelectAll" name="selectall" type="checkbox"/></th>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>邮箱</th>
                    <th>班级</th>
                    <th>操作</th>
                </tr>
                <c:forEach items="${pageInfo.list}" var="stu">
                    <tr>
                        <td>
                            <label style="color:#ff7f65">
                                <input id="" name="sid" value="${stu.sid}" class="SelectSingle" type="checkbox">
                            </label>
                        </td>
                        <td>${stu.sid}</td>
                        <td>${stu.sname}</td>
                        <td>${stu.ssex=="0"?"男":"女"}</td>
                        <td>${stu.semail}</td>
                        <td>${stu.scid=="1"?"软工1班":(stu.scid=="2"?"软工2班":"软工3班")}</td>
                        <td>
                            <button class="btn btn-primary btn-sm">
                                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
<%--                                <a href="${APP_PATH }/toUpdateStudent" style="color: white">编辑</a>--%>
                                <a href="${APP_PATH}/toUpdateStudent/${stu.sid}" style="color: white">编辑</a>
                            </button>
                            <button class="btn btn-danger btn-sm">
                                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
<%--                                <a href="/deleteStudentById" style="color: white" onclick="return confirm('你确定要删除该学生的所有信息吗')">--%>
                                <a href="${APP_PATH}/deleteStudentById?sid=${stu.sid}" style="color: white" onclick="return confirm('你确定要删除该学生的所有信息吗')">
                                删除
                                </a>
                            </button>
                        </td>
                    </tr>
                </c:forEach>
            </table>
        </div>
</div>

 复选框绑定事件

<script src="./jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#SelectAll').click(function (e) {
            $('.SelectSingle').prop('checked',this.checked);
        });
        $(".SelectSingle").click(function () {
            if ($(".SelectSingle").length==$(".SelectSingle:checked").length){
                $("#SelectAll").prop("checked",true);
            }else {
                $("#SelectAll").prop("checked",false);
            }
        });
    });
</script>

注意批量删除按钮设定，重点为<button>标签中的属性值，<span>标签用于设定样式。

<button id="btn2" onclick="return todelect()" class="btn btn-danger">
     <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
     批量删除
</button>

4.通过js和ajax发出请求到Controller

<script src="./jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    function todelect(){//undefined
        var Checkbox=false;//默认复选框为空
        var count=0;//用于记录选中要删除的条数
        $("input[name='sid']").each(function(){//undefined//获取复选框节点id
            if (this.checked==true) {
                Checkbox=true;    //已勾选
                count++;
            }
        });
        if (Checkbox){//undefined//boolean值为true
            var t=confirm("您确认要删除选中的这"+count+"条内容吗？");//弹出对话进行警告
            if (t==false) return false;    //不勾选不处理
            obj = document.getElementsByName("sid");//将复选框定义成一个jquery对象
            check_val = [];//定义一个数组
            for(k in obj){//k相当于i,往这个jquery对象添加勾选的id;
                if(obj[k].checked)//选中的都放进 数组里
                    check_val.push(obj[k].value);
            }
 
            $.ajax({//利用ajax发出请求
                type:"POST",//post类型
                url:"${APP_PATH}/deleteSomeStudent?sids="+check_val, //向Controller里的deleteSelect传输ids
                success:function(data){//undefined//删除成功后，deleteMany会返回一个"ok";
                    if(data=="ok"){//undefined
                        alert("删除成功！");//返回ok后弹出一个对话框。
                        location.href="${APP_PATH}/list";//相当于刷新界面
                    }
                }
            });
 
        }
        else{//undefined
            alert("请选择您要删除的内容!");//不勾选不提交，弹出警告框。
            return false;
        }
    }
</script>

批量删除的前提是做好分页查询。 关于分页的相关操作可看我的另一篇博客-->ssm使用pageHelper进行分页_咻咻咻0v0的博客-CSDN博客

5.StudentService层（编写实现类）

IStudentService接口：

public interface IStudentService {
    Integer deleteSomeStudent(String[] sids);
}

StudentService实现类：

@Service
public class StudentService implements IStudentService {
    @Autowired
    private StudentMapper studentMapper;
 
    @Override
    public Integer deleteSomeStudent(String[] sids) {
        return studentMapper.deleteSomeStudent(sids);
    }
}

6.StudentController层

@Controller
public class StudentController {
 
    @Autowired
    private IStudentService studentService;
 
    @RequestMapping("/deleteSomeStudent")
    @ResponseBody
    public String deleteSomeStudent(String sids,Model model){
        System.err.println(sids);
        String[] d=sids.split(",");//把数组里的值逗号隔开
        System.out.println("批量删除成功");
        studentService.deleteSomeStudent(d);
        return "ok";//返回给ajax
    }
}

7.效果图演示

最终效果页面若不选中任何数据，会弹出弹框提示“请选择您要删除的内容！”

最终效果页面点击全选后： 

 点击批量删除后，弹出谈弹框，其中包括查询到的n条数据：

 点击弹框中的确认后，先弹出弹框提示删除成功： 

点击确定后更新列表中的数据，此时第一页的数据已被全部删除，展示的数据从原来的第二页的第一条数据开始，在下图可以看到记录条数与页数均相应变化，删除成功后可在任意选择数据进行删除： 

从下图数据库中可以看到，数据中的sflag标志发生了变化，但实际上数据仍存在，实现了假删除：

over！

平平无奇小白程序媛一枚，欢迎各位大佬交流指教，如有不正确的地方，欢迎留言改正，谢谢！！！