当前位置：首页 > article >正文

前端+后端实现全选、反选+批量删除

article 2025/2/24 4:36:31

一、批量删除

<!-- 添加 remove 类名 -->
                <input type="button" value="批量删除" class="remove">

我们先将批量删除的按钮命名为remove

然后我们写js

// 批量删除
$(".remove").on("click", function () {
    var ids = [];
    $(".check_item:checked").each(function () {
        ids.push($(this).val());
    });
    
    // 检查是否有选中的项
    if (ids.length === 0) {
        alert("请至少选择一项");
        return;
    }

    // 提示用户确认
    if (confirm("确定删除选中的项吗？")) {
        $.ajax({
            url: "RemoveServlet", 
            type: "post",
            data: {
                ids: ids.join(',')
            },
            success: function (value) {
                alert(value);
                loadData(); 
                loadPage(); 
            },
            error: function () {
                alert("批量删除请求失败！");
            }
        });
    }
});

事件设置：
代码通过 jQuery 给具有 remove 类的元素绑定了一个点击事件。
当用户点击“删除”按钮时，事件处理函数将会被触发
$(".remove").on("click", function ()
收集选中的项：
使用 jQuery 查找所有被选中的复选框（即带有 check_item 类且选中状态的复选框）。
提取这些复选框的值（通常是对应的 ID），并将其存储在数组 ids 中。
var ids = []; 
$(".check_item:checked").each(function () {
 ids.push($(this).val())
})
检查是否选择了项：
如果 ids 数组的长度为 0，表示用户没有选择任何项，弹出提醒框并结束操作。
if (ids.length === 0) { 
   alert("请至少选择一项"); 
   return; 
}
确认删除操作：

使用 confirm 弹窗提示用户是否确认删除选中的项，用户必须选择“确定”才能继续执行后续操作。
发送 AJAX 请求：
如果用户确认删除，就使用 jQuery 的 $.ajax() 方法向服务器发送 HTTP POST 请求。
请求的 URL 是 RemoveServlet，并通过 data 将被选中的项的 ID（以逗号分隔的字符串）发送到服务器。
$.ajax({
   url: "RemoveServlet", 
   type: "post",
   data: {
      ids: ids.join(',')
 },
处理响应：
成功回调：如果服务器成功处理删除请求，弹出服务器返回的消息，并调用 loadData() 和 loadPage() 函数重新加载数据和更新分页。
success: function (value) { 
    alert(value)
    loadData()
    loadPage()
},
错误回调：如果请求失败，弹出错误提示。
error: function () { 
    alert("批量删除请求失败！")
 }

接着我们写Servlet

package servelt;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import db.MysqlUtil;

@WebServlet("/RemoveServlet")
public class RemoveServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public RemoveServlet() {
        super();
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/plain;charset=utf-8");

        String idString = request.getParameter("ids");
        if (idString == null || idString.isEmpty()) {
            response.getWriter().write("未提供有效的删除 ID 列表");
            return;
        }

        String[] ids = idString.split(",");
        StringBuilder sqlBuilder = new StringBuilder("DELETE FROM content WHERE id IN (");
        for (int i = 0; i < ids.length; i++) {
            if (i > 0) {
                sqlBuilder.append(",");
            }
            sqlBuilder.append(ids[i]);
        }
        sqlBuilder.append(")");
        int num = MysqlUtil.del(sqlBuilder.toString());
        String res = (num > 0) ? "删除成功" : "删除失败";
        response.getWriter().write(res);
    }
}

我们只需修改dopose方法
字符编码设置：
request.setCharacterEncoding("utf-8"); 
response.setContentType("text/plain;charset=utf-8");
设置请求内容的字符编码为 UTF-8，确保能够正确处理中文等特殊字符。
设置响应的内容类型为纯文本，并指定字符编码。
获取请求参数：
String idString = request.getParameter("ids");
从请求中获取名为 ids 的参数，这个参数应该包含待删除项的 ID，以逗号分隔的字符串形式。
参数有效性检查：
if (idString == null || idString.isEmpty()) {
   response.getWriter().write("未提供有效的删除 ID 列表")
   return
}
检查 idString 是否为 null 或为空，若是则返回提示信息，防止后续执行无效的删除操作。
构建 SQL 删除语句：
String[] ids = idString.split(",")
StringBuilder sqlBuilder = new StringBuilder("DELETE FROM content WHERE id IN (")
for (int i = 0; i < ids.length; i++) { 
    if (i > 0) { 
       sqlBuilder.append(",")
    } 
   sqlBuilder.append(ids[i])
 } 
sqlBuilder.append(")");
将 idString 按逗号分割成 ID 数组，构建 SQL 删除语句使用 StringBuilder 动态拼接 ID。
执行删除操作：
int num = MysqlUtil.del(sqlBuilder.toString());
调用 MysqlUtil 中的 del 方法，执行构建的 SQL 删除语句，并返回影响的记录数。
返回结果：
String res = (num > 0) ? "删除成功" : "删除失败";
 response.getWriter().write(res);
根据 num 的值判断删除操作是否成功，并将相应的结果返回给客户端。

二、全选

// 全选
$(".check_all").on("change", function () {
    // 检查全选框的状态
    if ($(this).prop("checked")) {
        $(".check_item").prop("checked", true)
    } else {
        $(".check_item").prop("checked", false)
    }
});

事件绑定：
$(".check_all").on("change", function ()
使用 jQuery 为具备 check_all 类的复选框绑定 change 事件。这意味着每当该复选框的状态发生变化时，后续的函数将会被调用。
检查全选框的状态：
if ($(this).prop("checked"))
使用 $(this).prop("checked") 检查当前的全选复选框是否被选中。
this 指代的是触发事件的 check_all 复选框对象。
使用 prop() 获取某个元素的属性值时，可以直接传入属性名，
也可以通过 prop() 方法设置元素的属性值，例如：
$('#myCheckbox').prop('checked', true); // 将复选框设为选中状态
选择所有项：
$(".check_item").prop("checked", true);
如果全选框被选中（即 checked 为 true），则通过 jQuery 选择所有带有 check_item 类的复选框，并将它们的 checked 属性设置为 true，从而实现全选。
取消选择所有项：
$(".check_item").prop("checked", false);
如果全选框未被选中，则取消所有带有 check_item 类的复选框的选中状态，将它们的 checked 属性设置为 false。

三、反选

//反选
$("tbody").on("click", ".check_item", function () {
    var allChecked = $(".check_item").length === $(".check_item:checked").length;
    $(".check_all").prop("checked", allChecked);
});

事件委托：
$("tbody").on("click", ".check_item", function ()
使用 jQuery 的事件委托方法，在 tbody 元素下监听 check_item 类复选框的点击事件。
这种方法允许在动态生成的内容上使用事件处理器，而不需要为每个复选框单独绑定事件。
计算选中的复选框数量：
var allChecked = $(".check_item").length === $(".check_item:checked").length;
这里，通过 $(".check_item").length 获取所有带有 check_item 类的复选框的总数。
通过 $(".check_item:checked").length 获取当前选中的 check_item 复选框的数量。
这两个数量进行比较，得出 allChecked 变量，表示是否所有复选框都被选中。
更新全选复选框的状态：
$(".check_all").prop("checked", allChecked);
根据 allChecked 的值来设置全选复选框的 checked 属性。
如果 allChecked 为 true，则全选复选框被设置为选中；如果为 false，则全选复选框取消选中。