基于复选框的用户信息批量删除

最新推荐文章于 2023-03-20 19:51:08 发布

又再写bug

最新推荐文章于 2023-03-20 19:51:08 发布

阅读量2k

点赞数 2

分类专栏： MyBatisPlus mysql 文章标签： java

本文链接：https://blog.csdn.net/weixin_46007404/article/details/107737697

版权

MyBatisPlus 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

mysql

4 篇文章 0 订阅

订阅专栏

用户批量删除+前端将js数组通过ajax传给后端，后端接受转换成字符串数组

a.需求分析:
在user.html中，勾选多条记录对应的复选框，当点击删除按钮，批量删除多条记录。
当点击标题栏的复选框时，实现全选和全不选功能。
b.流程分析：
页面中，当点击删除按钮时，通过jquery获取多个复选框对应的记录的id值，然后使用异步的方式，将多条id值传递到后台ManagerController进行删除。
c.思路分析：
前端：使用jquery获取多个选中的复选框，通过复选框再进一步获取它对应的记录的主键id，使用异步的方式提交删除的主键值，并回显结果在页面。
使用jquery提供的方法实现全选和全不选功能
后端：ManagerController调用ManagerService进行批量删除

效果：
在这里插入图片描述

示例：

1.user.html中：
注：省略部分非重要代码。
a: User.html中，为总的复选框，绑定事件，实现全选、全不选功能：
在这里插入图片描述

b: 为每一行记录前面的复选框添加对应的记录的managerId和统一的class，并针对删除按钮绑定点击事件，当删除时，使用ajax异步提交删除请求：

c: 为delBatch 批量删除按钮，绑定点击事件

d: user.html模板中的总体代码：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <style>
        .tree li {
            list-style-type: none;
            cursor: pointer;
        }

        table tbody tr:nth-child(odd) {
            background: #F4F4F4;
        }

        table tbody td:nth-child(even) {
            color: #C00;
        }
    </style>
</head>

<body>

<div th:replace="~{common :: nav}"></div>

<div class="container-fluid">
    <div class="row">
        <!--左侧菜单-->
        <div th:replace="~{common :: left(lv1='qxgl',lv2='user.html')}"></div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;" th:action="@{/user.html}">
                        <div class="form-group has-feedback">
                            <div class="input-group">
                                <div class="input-group-addon">查询条件</div>
                                <input class="form-control has-success" type="text" name="likeName"
                                       placeholder="请输入查询条件" th:value="${param.likeName}">
                            </div>
                        </div>
                        <button type="submit" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询
                        </button>
                    </form>
                    <button id="delBatch" type="button" class="btn btn-danger" style="float:right;margin-left:10px;"><i
                            class=" glyphicon glyphicon-remove"></i> 删除
                    </button>
                    <button type="button" class="btn btn-primary" style="float:right;"
                            onclick="window.location.href='add.html'"><i class="glyphicon glyphicon-plus"></i> 新增
                    </button>
                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <table class="table  table-bordered">
                            <thead>
                            <tr>
                                <th width="30">#</th>
                                <th width="30"><input id="checkAll" type="checkbox"></th>
                                <th>账号</th>
                                <th>名称</th>
                                <th>邮箱地址</th>
                                <th width="100">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <!--我要将所有查询的数据，都显示在这里，每一个Manager信息，对应一个tr-->
                            <tr th:each="manager : ${result.data.records}">
                                <td th:text="${manager.id}">1</td>
                                <td><input class="itemBox" th:value="${manager.id}" type="checkbox"></td>
                                <td th:text="${manager.account}">Lorem</td>
                                <td th:text="${manager.name}">ipsum</td>
                                <td th:text="${manager.email}">dolor</td>
                                <td>
                                    <a th:href="@{/assignRole.html(id=${manager.id})}" class="btn btn-success btn-xs"><i
                                            class=" glyphicon glyphicon-check"></i></a>
                                    <a th:href="@{/edit.html(id=${manager.id})}" class="btn btn-primary btn-xs"><i
                                            class=" glyphicon glyphicon-pencil"></i></a>
                                    <button th:data_id="${manager.id}" type="button"
                                            class="btn btn-danger btn-xs delBtn"><i
                                            class=" glyphicon glyphicon-remove"></i></button>
                                </td>
                            </tr>

                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="6" align="center">
                                    <ul class="pagination">
                                        <li><a th:href="@{/user.html(pageNum=1,likeName=${param.likeName})}">首页</a></li>
                                        <!--显示当前页面前3个页码，当前页码后3个页码
                                                 2 3 4   5  6 7 8
                                        -->
                                        <li>
                                            <a th:href="@{/user.html(pageNum=${result.data.current-3},likeName=${param.likeName})}"
                                               th:text="${result.data.current-3}"
                                               th:if="${result.data.current-3} > 0"></a></li>
                                        <li>
                                            <a th:href="@{/user.html(pageNum=${result.data.current-2},likeName=${param.likeName})}"
                                               th:text="${result.data.current-2}"
                                               th:if="${result.data.current-2} > 0"></a></li>
                                        <li>
                                            <a th:href="@{/user.html(pageNum=${result.data.current-1},likeName=${param.likeName})}"
                                               th:text="${result.data.current-1}"
                                               th:if="${result.data.current-1} > 0"></a></li>
                                        <li class="active"><a href="#" disabled="disabled"
                                                              th:text="${result.data.current}"></a></li>
                                        <li>
                                            <a th:href="@{/user.html(pageNum=${result.data.current+1},likeName=${param.likeName})}"
                                               th:text="${result.data.current+1}"
                                               th:if="${result.data.current+1 <= result.data.getPages()}"></a></li>
                                        <li>
                                            <a th:href="@{/user.html(pageNum=${result.data.current+2},likeName=${param.likeName})}"
                                               th:text="${result.data.current+2}"
                                               th:if="${result.data.current+2 <= result.data.getPages()}"></a></li>
                                        <li>
                                            <a th:href="@{/user.html(pageNum=${result.data.current+3},likeName=${param.likeName})}"
                                               th:text="${result.data.current+3}"
                                               th:if="${result.data.current+3 <= result.data.getPages()}"></a></li>

                                        <li>
                                            <a th:href="@{/user.html(pageNum=${result.data.getPages()},likeName=${param.likeName})}">尾页</a>
                                        </li>
                                    </ul>
                                </td>
                            </tr>

                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/jquery/jquery-2.1.1.min.js}"></script>
<script th:src="@{/layer/layer.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/script/docs.min.js}"></script>
<script type="text/javascript">
    $(function () {
        //为delBatch 批量删除按钮，绑定点击事件
        $("#delBatch").click(function () {
            //1、获取到选中的复选框们吧
            //遍历前面选择的元素
            var ids = "";
            $(".itemBox:checked").each(function (index, element) {
                //拼接字符串，将这些要删除的id拼接起来，使用，分割
                ids += $(element).val() + ",";
            });
            //截取掉最后一个，
            //2、拼接参数
            ids = ids.substring(0, ids.length - 1);
            layer.msg('你确定要删除吗？', {
                time: 0 //不自动关闭
                , btn: ['确定', '取消']
                , yes: function (index) {
                    //进行异步删除
                    layer.close(index);
                    //3、发起异步请求，进行批量删除    => 后端应该提供一个批量删除的方法
                    $.ajax({
                        url: "[[@{/delAll.do}]]",
                        method: "post",
                        data: {"ids": ids},
                        dataType: "json",
                        success: function (result) {
                            //4、回显，刷新页面
                            if (result.code == "SUCCESS") {
                                //回显结果
                                layer.msg('删除成功', {
                                    icon: 6
                                }, function () {
                                    location.href = "[[@{/user.html}]]";
                                });
                            } else {
                                layer.msg('删除失败', {
                                    icon: 6
                                });
                            }
                        }
                    });
                }
            });
        });

        //绑定全选，全不选操作
        //checkAll上面的那个复选框
        $("#checkAll").click(function () {
            $(".itemBox").prop("checked", this.checked);
        });
   
</script>
</body>
</html>

2.ManagerController.java控制类中：

@Controller
public class ManagerController {

    //    @Autowired
    @Resource
    ManagerService managerService;
    
    //通过一些id进行批量删除
    @ResponseBody
    @PostMapping("/delAll.do")
    public ResultEntity delAll(String ids){
        String[] split = ids.split(",");
        //将字符串数组转为字符串集合
        List<String> strings = Arrays.asList(split);
        boolean b = managerService.removeByIds(strings);
        if (b) {
            return ResultEntity.success();
        }else {
            return ResultEntity.failed();
        }
    }
  }

3.ManagerService.java接口：

import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.IService;
import com.kmu.entity.Manager;

/**
 *  服务类
 */
public interface ManagerService extends IService<Manager> {
}

前端将js数组通过ajax传给后端，后端接受转换成字符串数组
前端：
获取：
在这里插入图片描述
发送：

后端：

4.application.yml；

spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/kmu_crowd?characterEncoding=utf8
    username: root
    password: root

5.pom.xml文件中：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.kmu</groupId>
    <artifactId>crowd-manager</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>crowd-manager</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <spring-boot.version>2.3.0.RELEASE</spring-boot.version>
    </properties>

    <dependencies>
        <!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha -->
        <dependency>
            <groupId>com.github.penggle</groupId>
            <artifactId>kaptcha</artifactId>
            <version>2.3.2</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>

        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.3.7</version>
        </dependency>

        <!--mybatisPlus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.3.2</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
            <version>5.1.38</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-dependencies</artifactId>
                <version>${spring-boot.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.xml</include>
                </includes>
            </resource>

            <resource>
                <directory>src/main/resources</directory>
                <filtering>true</filtering>
                <excludes>
                    <exclude>**/*.woff</exclude>
                    <exclude>**/*.woff2</exclude>
                    <exclude>**/*.ttf</exclude>
                </excludes>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
                <filtering>false</filtering>
                <includes>
                    <include>**/*.woff</include>
                    <include>**/*.woff2</include>
                    <include>**/*.ttf</include>
                </includes>
            </resource>
        </resources>
    </build>

</project>