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

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

作者：互联网

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

文章目录

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 数组发给后台
但是这个东西怎么去获取
最前端在这里， 26-前端-单条删除，继续往下会说到
在这里插入图片描述
在这里插入图片描述
回过头看 my -role.js 里面怎么写
在这里插入图片描述
隔着几个函数，所以我们要考虑用全局变量
在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述
当请求体是json数据的时候，我们就必须要告诉服务器
在这里插入图片描述
后面的部分，可以复制一下其它的ajax方法改改即可
在这里插入图片描述
在这里插入图片描述
下面看不一样的部分怎么去写

26-前端-单条删除（）

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

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

在这里插入图片描述
首先要给这个全选按钮绑定单击函数
在这里插入图片描述
正确的在这
在这里插入图片描述

在这里插入图片描述
那么如何根据多选框的状态去设置其它的选择框的状态呢？
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
反过来怎么做，这里需要注意，这个是动态生成的，所以我们需要 on
复制一下前面的on是怎么写的
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
非常巧妙
下面我们看结果

在这里插入图片描述

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

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

绑定单击函数，需要有id，我们加个id
在这里插入图片描述
首先我们要知道被勾选的是哪些
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
为啥这么写，，我们分析一下
在这里插入图片描述
在这里插入图片描述
有一种情况是什么都没有选，用户就点了（批量）删除
这种情况要怎么处理，在代码里面怎么写
在这里插入图片描述
测试
如果没有选择
在这里插入图片描述
如果选择了
在这里插入图片描述
bug 解决
全选删除完成后，，全选按钮没有复原
在这里插入图片描述
在这里插入图片描述

29-删除-小结

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

标签：__,模态,删除,批量,前端,RequestBody,单条,我们
来源： https://blog.csdn.net/qq_41753340/article/details/122055657