基于ThinkPHP实现批量删除-前端开发

下面是详细讲解“基于ThinkPHP实现批量删除”的完整攻略。

下面是详细讲解“基于ThinkPHP实现批量删除”的完整攻略。

背景

在一些网站或系统中，我们经常需要批量删除某些数据，如果手动一个一个删除，效率很低，而且容易出错。因此，我们需要实现一个批量删除的功能，来提高效率和降低错误率。本文将会以ThinkPHP为例，来讲解如何实现这个功能。

思路

具体的思路如下：

首先需要在前端页面上搭建一个删除按钮，勾选要删除的数据后，点击删除按钮发送请求到服务器端。
服务端接收到请求后，对勾选的数据进行批量删除。

实现步骤

步骤一：前端页面设计

首先，在前端页面中，我们需要设计一个删除按钮和一个勾选所有数据的复选框，然后通过ajax将选择的数据的id发送给服务端。HTML代码示例：

<table>
  <thead>
    <tr>
      <th><input type="checkbox" id="selectAll"/></th>
      <th>编号</th>
      <th>名称</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="ids" value="1"></td>
      <td>1</td>
      <td>用户1</td>
      <td><a href="#">编辑</a></td>
    </tr>
    <tr>
      <td><input type="checkbox" class="ids" value="2"></td>
      <td>2</td>
      <td>用户2</td>
      <td><a href="#">编辑</a></td>
    </tr>
    <tr>
      <td><input type="checkbox" class="ids" value="3"></td>
      <td>3</td>
      <td>用户3</td>
      <td><a href="#">编辑</a></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4"><a href="#" id="delAll">删除</a></td>
    </tr>
  </tfoot>
</table>

<script>
  // 全选/全不选
  $('#selectAll').click(function(){
    $('.ids').prop('checked', $(this).is(':checked'));
  });

  // 批量删除
  $('#delAll').click(function(){
    var ids = [];
    $('.ids:checked').each(function(){
      ids.push($(this).val());
    });

    if(ids.length === 0){
      alert('请选择要删除的用户！');
      return;
    }

    if(confirm('确定要删除所选用户吗？')){
      $.ajax({
        url: "/user/delAll",
        data: {ids: ids},
        type: "POST",
        dataType: "json",
        success: function(json){
          if(json.code === 1){
            alert('删除成功！');
            window.location.reload();
          } else {
            alert('删除失败！');
          }
        }
      });
    }
  });
</script>

在上面的代码中，我们首先定义了一个表格，表格中包含了复选框、编号、名称和操作四列。其中，复选框用来选择要删除的数据，编号和名称用来展示数据，操作列中包含了编辑按钮。

在javascript中，我们实现了以下功能：

全选/全不选：当我们勾选全选框时，将所有数据的复选框勾上；当我们取消全选框勾选时，将所有数据的复选框取消勾选。
批量删除：当我们点击删除按钮时，首先获取所有被勾选的数据的id，并将这些id发送给服务器端。如果没有勾选任何数据，则弹出提示框；如果勾选了数据，则弹出确认框，用户点击确认后将数据发送给服务器端进行删除操作。如果删除成功，则刷新页面，如果删除失败，则弹出提示框。

步骤二：服务端实现

在服务端，我们需要实现一个delAll方法来处理批量删除请求。具体实现代码如下：

class User extends Controller
{
  public function delAll()
  {
    $ids = input('ids');

    if(empty($ids)){
      return ['code' => 0, 'msg' => '请选择要删除的数据！'];
    }

    $model = model('User');
    if($model->destroy($ids)){
      return ['code' => 1, 'msg' => '删除成功！'];
    } else {
      return ['code' => 0, 'msg' => '删除失败！'];
    }
  }
}

在上述代码中，我们首先接收前端传来的ids参数，判断这个参数是否为空；如果为空，则返回删除失败的消息。如果ids不为空，则调用Model的destroy方法进行批量删除操作，如果删除成功，则返回删除成功的消息，否则返回删除失败的消息。

示例

下面是两种实例说明。

示例一：删除单条数据

假设我们现在有一条数据，编号为1，名字为张三，我们需要删除这条数据。想要实现这个功能，只需要打开这条数据的编辑页面，然后在底部点击“删除”按钮即可。

示例二：删除多条数据

假设我们现在有三条数据，分别是1. 张三，2. 李四，3. 王五，我们需要将其中的张三、王五这两条数据删除。这时，我们可以在数据列表页面中，勾选这两条数据的复选框，并点击“删除”按钮即可。

结论

通过本文的讲解，我们知道了如何基于ThinkPHP框架实现批量删除功能。在前端页面中，我们需要设计一个删除按钮和一个勾选所有数据的复选框，然后通过Ajax将选择的数据的id发送给服务端。在服务端，我们需要实现一个delAll方法来处理批量删除请求。在处理完请求后，需要将成功或者失败的消息返回给前端。