基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能

请看下面的攻略：

前言

本攻略将详细讲解如何使用 PHP 框架 ThinkPHP 和 jQuery 实现 Ajax 的多选反选不选删除数据功能。

准备工作

在开始之前，需要确保你已经完成以下准备工作：

已经安装了 PHP 和 MySQL，且掌握了基本的 PHP 和 MySQL 知识；
已经安装了 Apache 或者 Nginx 服务器，并成功配置了虚拟主机；
已经安装了 Composer，且掌握了基本的 Composer 知识。

安装 ThinkPHP

我们可以使用 Composer 安装 ThinkPHP：

composer create-project topthink/think=5.1.x  projectname

其中，projectname 是你的项目名称。安装完成后，进入项目目录：

cd projectname

使用内置服务器运行项目（默认在 http://localhost:8000 上监听）：

php think run

在浏览器中访问 http://localhost:8000，即可看到首页。

实现 Ajax 多选反选不选删除数据功能

新建数据库

首先，我们需要在 MySQL 中新建一个数据库。假设我们将数据库命名为 ajax_demo，并新建一个表来存储数据，命名为 users，包含以下字段：

id：自增主键；
name：用户名称，varchar(255)；
age：用户年龄，int；
sex：用户性别，int，0 代表女性，1 代表男性。

新建路由和控制器

在 ThinkPHP 中，我们使用路由来处理 HTTP 请求。打开 application/route.php 文件，添加以下路由：

Route::get('user', 'User/index');
Route::post('user/delete', 'User/delete');

其中，User/index 指向的是 User 控制器的 index 方法，用于显示用户列表；User/delete 指向的是 User 控制器的 delete 方法，用于删除用户。

然后，我们新建一个 User 控制器，命名为 UserController，并添加以下代码：

<?php
namespace app\index\controller;

use think\Controller;

class UserController extends Controller
{
    public function index()
    {
        $list = Db::name('users')->select();
        $this->assign('list', $list);
        return $this->fetch();
    }

    public function delete()
    {
        $ids = input('post.ids');
        $result = Db::name('users')->where('id', 'in', $ids)->delete();
        if ($result) {
            return json(['code' => 0, 'msg' => '删除成功！']);
        } else {
            return json(['code' => 1, 'msg' => '删除失败！']);
        }
    }
}

其中，index 方法用于显示用户列表，delete 方法用于删除用户。需要注意的是，我们使用了 input 函数来获取 POST 请求中的 ids 参数，这个参数用于指定需要删除的用户 ID。

新建视图文件

我们在 application\index\view\user 目录下新建一个 index.html 文件，用于显示用户列表：

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <script src="/static/jquery-3.3.1.min.js"></script>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th><input type="checkbox" id="check_all"></th>
                <th>编号</th>
                <th>名称</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            {volist name="list" id="user"}
            <tr>
                <td><input type="checkbox" class="check" data-id="{$user.id}"></td>
                <td>{$user.id}</td>
                <td>{$user.name}</td>
                <td>{$user.age}</td>
                <td>{$user.sex == 1 ? '男' : '女'}</td>
            </tr>
            {/volist}
        </tbody>
    </table>
    <button id="delete_btn">删除选中</button>

    <script>
        $(document).ready(function() {
            // 全选/反选按钮点击事件
            $('#check_all').click(function() {
                if ($(this).prop('checked')) {
                    $('.check').prop('checked', true);
                } else {
                    $('.check').prop('checked', false);
                }
            });

            // 删除按钮点击事件
            $('#delete_btn').click(function() {
                var ids = [];
                $('.check:checked').each(function() {
                    ids.push($(this).data('id'));
                });

                if (ids.length == 0) {
                    alert('请选择需要删除的数据！');
                    return false;
                }

                if (confirm('确定要删除选中的数据吗？')) {
                    $.ajax({
                        url: '/user/delete',
                        type: 'POST',
                        data: {
                            ids: ids.join(',')
                        },
                        dataType: 'json',
                        success: function(res) {
                            if (res.code == 0) {
                                alert(res.msg);
                                window.location.reload();
                            } else {
                                alert(res.msg);
                            }
                        },
                        error: function() {
                            alert('发生未知错误！');
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>

以上的代码中，我们创建了一个表格来展示用户数据，包含编号、名称、年龄、性别等字段，同时添加了一个全选/反选按钮和一个删除按钮。在 JavaScript 中，我们使用了 jQuery 的 .click() 和 .prop() 方法来监听按钮点击事件和修改属性值，使用 .each() 方法来遍历选中的项，使用 AJAX 发送 POST 请求来删除选中的用户数据。

运行效果

在浏览器中访问 http://localhost:8000/user，即可看到用户列表页面。可以鼠标点击全选/反选按钮，或者只选中部分数据后点击删除按钮，删除数据时将会发送 POST 请求并实时更新页面数据。

示例说明

为了更好的帮助您理解 Ajax 多选反选不选删除数据功能的具体实现，这里给出了两个示例：

示例一

用户列表

编号	名称	年龄	性别
1	张三	20	男
2	李四	22	女
3	王五	25	男
4	赵六	30	女

操作步骤

点击全选/反选按钮，将所有数据选中；
点击删除选中按钮，将弹出确认对话框，并提示“确定要删除选中的数据吗？”；
点击确定按钮，将会发送 POST 请求，删除所有数据；
页面自动刷新，表格内容为空。

示例二

用户列表

编号	名称	年龄	性别
1	张三	20	男
2	李四	22	女
3	王五	25	男
4	赵六	30	女

操作步骤

选中第1、3、4条数据；
点击删除选中按钮，将弹出确认对话框，并提示“确定要删除选中的数据吗？”；
点击确定按钮，将会发送 POST 请求，删除第1、3、4条数据；
页面自动刷新，表格中仅显示第2条数据。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能 - Python技术站

基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能

前言

准备工作

安装 ThinkPHP

实现 Ajax 多选反选不选删除数据功能

新建数据库

新建路由和控制器

新建视图文件

运行效果

示例说明

示例一

用户列表

操作步骤

示例二

用户列表

操作步骤

相关文章