项目一众筹网04_4_角色维护删除_单条删除和批量删除怎么实现_确认提示，，你真的要删除吗__@RequestBody和@ResponseBody结合使用_全选功能_前端获取id发到后端_ajax发送

Posted 2022-01-12 平凡加班狗

角色维护删除系列文章目录

文章目录

• 角色维护删除系列文章目录
• 22-删除-目标和思路（下一篇）
• • 单条删除和批量删除怎么实现
  • 批量删除和单条删除合成一套
  • 思路图
• 23-后端
• • 在这里我们就@RequestBody和@ResponseBody都用到了
• 24-前端-打开模态框
• 25-前端-执行删除
• • 如何判断代码是否是动态生成的
  • 前端-执行删除
  • ==@RequestBody和@ResponseBody的结合使用，一段看懂==
• 26-前端-单条删除（）
• 27-前端-批量删除-全选全不选功能
• 28-前端-批量删除-收集要删除的信息
• 29-删除-小结

22-删除-目标和思路（下一篇）

同理，删除跟修改一样
动态生成的数据需要使用特定方式绑定函数on函数的使用，解决只有当前页面可以弹出模态框，其它页面弹不出来的问题_dom操作获取角色名称显示回显

单条删除和批量删除怎么实现

批量删除和单条删除合成一套

我们想想，我们当然可以写两个方法来进行单条删除和批量删除
但是我们其实也可以合并成一套
这样又可以少写一些代码，节约社会资源 (
单条数据删除是根据id，批量删除是根据一组id 即 数组 ，其实是可以遍历去单条删除的

后端只处理一种情况即可，就只处理数组的情况，在前端去做处理即可

思路图

23-后端

主要是SSM框架太强大了，我们简单增删改查，根本就不需要写sql
所以目前后端看起来特别简单，直接调用就好了
有两种方式，一种是循环

我们这里直接使用第2种方式，第一种方式也知道就行了我们这里主要是学习第2种方式，开阔视野


内部也是用了各种封装

在这里我们就@RequestBody和@ResponseBody都用到了

如果没有 @RequestBody，我们就没办法在前端去通过ajax传入json数据的data，，相当于我们没办法通过ajax传参过来到后端，必须借助@RequestBody

下面就是前端要怎么写
首先前端的思路我们要先知道

24-前端-打开模态框

要想把模态框打开，必须得先有模态框






写一个临时的测代码测试 一下上面这段代码


有点靠边，我们做一个居中一点的




千万别忘记清除旧数据，否则会一直叠加

点击确认以后把数据发送给后端，我们可以想到，这肯定是ajax了

25-前端-执行删除

如何判断代码是否是动态生成的

这说明模态框里面的这个代码不是动态生成的

前端-执行删除

所以我们可以这么写，而不需要向前面修改一样去使用 on，动态生成的就要用on，不是动态生成的可以不用on，
逻辑是，点击删除后，会弹出模态框，让我们确认是否真的删除
我们这里真正触发删除的是确认删除按钮，而不是删除，
而确认删除按钮是模态框里面的，不是js动态生成的，所以不用on
我们要把什么发给后台
我们要把id 数组发给后台
但是这个东西怎么去获取



回过头看 my -role.js 里面怎么写

隔着几个函数，所以我们要考虑用全局变量

@RequestBody和@ResponseBody的结合使用，一段看懂

当请求体是json数据的时候，我们就必须要告诉服务器

后面的部分，可以复制一下其它的ajax方法改改即可


下面看不一样的部分怎么去写

26-前端-单条删除（）

前面已经讲过，这里为了结合批量删除的理解 我们再说一遍
首先注意，这里每一行数据的删除按钮 是js动态生成的，所以绑定这个按钮的事件 要用on




整理一下代码

下面就是看批量删除

27-前端-批量删除-全选全不选功能

首先要给这个全选按钮绑定单击函数

正确的在这

那么如何根据多选框的状态去设置其它的选择框的状态呢？

反过来怎么做，这里需要注意，这个是动态生成的，所以我们需要 on
复制一下前面的on是怎么写的



非常巧妙
下面我们看结果

全选、全不选就完成了
下面就是批量删除按钮要具体怎么写

28-前端-批量删除-收集要删除的信息

绑定单击函数，需要有id，我们加个id

首先我们要知道被勾选的是哪些



为啥这么写，，我们分析一下


有一种情况是什么都没有选，用户就点了（批量）删除
这种情况要怎么处理，在代码里面怎么写

测试
如果没有选择

如果选择了

bug 解决
全选删除完成后，，全选按钮没有复原

29-删除-小结

代码自己模拟写一遍
比如做个商品管理