您现在的位置是:首页 > 正文

ThinkPhp6、Laravel框架使用Ajax完成无刷新批量删除操作

2024-02-01 04:39:09阅读 4

TP 框架和 Laravel 框架使用 Ajax 完成批量删除几乎一模一样,两者并无太大区别

批量删除的要点就一点,获取到所选中的复选框的 ID,只要取到 ID,剩下的就好办了

复选框全选全不选操作如下:https://blog.csdn.net/Xian_Hu/article/details/121486325?spm=1001.2014.3001.5501icon-default.png?t=LA92https://blog.csdn.net/Xian_Hu/article/details/121486325?spm=1001.2014.3001.5501

                                      完整代码在最下方

第一步:

给复选框和批删按钮设置上点击事件,批删按钮可用 ID Class 设置点击事件,而复选框只能使用 Class 设置点击事件,因为 ID 我们要进行赋值,取到所有复选框的 ID

 //            批删按钮点击事件 

<button type="button" id="delAll">批删</button>

 //            复选框点击事件 , 这里我使用了循环,所以 ID 为 val.id(循环遍历ID)

<input type="checkbox" id="{$val.id}" class="btns">

            

第二步:

引用 JS,并起一个 ID 数组,进行赋值

 第三步:

书写 Aajx 进行传值

 第三步:

到达控制层接收 ID ,接收到 ID 后实例化对象传到模型层进行操作

 第四步:

到达模型层完成删除的操作,直接使用 destroy 实现删除即可

 第五步:

在到达控制层进行判断是否删除成功,删除成功直接返回 Json 形式的数据(大部分不会失败)

第六步:

到达 Ajax 返回值,进行判断传回参数是否正确,判断成功的话直接把所有祖先元素的段落删除

                                         完整代码

                                         HTML

//            批删按钮点击事件 

<button type="button" id="delAll">批删</button>

 //            复选框点击事件 , 这里我使用了循环,所以 ID 为 val.id(循环遍历ID)

<input type="checkbox" id="{$val.id}" class="btns">
//   Js代码块
<script>
    $("#delAll").click(function ()
    {
        // 起一个名为ID的数组
        var id = [];
        $(".btns:checked").each(function()
        {
            // 获取到已被选中复选框的ID并赋值
           id.push($(this).prop("id"));
        });
        // 进行ajax处理
        $.ajax({
            // 传值位置
           url:'delAll',
            // 传值方式
           type:'get',
            // 传值内容
            data:{id:id},
            // 返回值类型
           dataType:'json',
            // 返回值
           success:function (e)
           {
               // 打印返回值
               console.log(e);
               // 判断返回值是否正确
               if(e.code==600)
               {
                   // 判断成功,把所有被选中的复选框祖先元素的段落删除
                   $(".btns:checked").parents('tr').remove();
               }
           }
        });
    });
</script>

    
                                       控制器

//    批量删除的控制器
    public function delAll()
    {
//        获取到ID值
        $id = $_GET["id"];
//        实例化对象
        $obj = new \app\model\user();
//        判断是否成功
        $res = $obj->delAll($id);
        if($res)
        {
//            成功返回值json的值
            return json([
               'code'=>'600',
               'msg'=>'成功',
               'data'=>'',
            ]);
        }
    }

                                       模型层

public function delAll($id)
{
     return $this->destroy($id);
}


网站文章

  • safari浏览器百度账号登陆&quot;not_login&quot;错误

    safari浏览器百度账号登陆&quot;not_login&quot;错误

    开发过程中使用百度clouda框架下的账号登陆接口

    2024-02-01 04:39:02
  • android----R8混淆编译

    android----R8混淆编译

    当gradle 版本在5.1.1及其以上(或许以下某个版本就支持了)使用了新的混淆、压缩编译方法——R8。在本地操作的时候,这没有任何问题,当使用自动化部署打包的时候——JENKINS。问题出来了,在R8编译这一过程就报错:Expiring Daemon because JVM Tenured space is exhaustedDaemon will be stopped at the ...

    2024-02-01 04:38:55
  • 数据库的基本语句(mysql举例)

    数据库的基本语句(mysql举例)

    一、基础的显示、建立、删除命令(对数据库和表) 1.显示数据库列表 show databases; 2.使用此数据库 use mysql; 3.显示库中的数据表 show tables; 4.显示数据...

    2024-02-01 04:38:26
  • javascript 数组转二维数组

    问题:有一个51个数的数组,每17个转换成一个数组,最终转换成一个二维数组 例子 var list = [&quot;1101&quot;, &quot;1102&quot;, &quot;1103&...

    2024-02-01 04:38:21
  • PLSQL调试

    PLSQL调试

    以下文章:可以获取的内容,调PLSQL的行号,使用常用的快捷敲代码的方式(部分),初步调试存储过程,dual部分技巧,去重方式 1.调行号 tools(工具)----SQlWindow(窗口类型下)--show gutter line(显示行号) ,即可获得想要的行号 2.使用“字母+空格 ”比如说 sf 敲出“select * from ”,至于想要的什么样的输出...

    2024-02-01 04:38:14
  • 一套优雅的 Spring Boot + vue后台管理系统

    一套优雅的 Spring Boot + vue后台管理系统

    如何写一个优雅的项目?为了让更多人学习前后端分离项目,特意录制了一个基于Spring security + Jwt + Vue的前后端分离后台管理系统VueAdmin,手把手完整教学,另外...

    2024-02-01 04:38:08
  • 伪分布/集群搭建的详细过程

    伪分布/集群搭建的详细过程

    2024-02-01 04:37:42
  • solidity[1]-HelloWorld

    solidity介绍 以太坊拥有多种高级语言,可用于编写智能合约,每种语言都受到另一种广泛使用的语言的启发。最流行的一种叫做Solidity,它基于JavaScript。由于Solidity是迄今为止...

    2024-02-01 04:37:35
  • vite &amp; FormData &amp; mock,跨域&amp;无法上传

    mock模式开启时,我这里是无法请求通过FormData,浏览器New Work上显示padding中,关闭mock后就可以了;

    2024-02-01 04:37:29
  • appnode怎么样_Linux面板AppNode免费开放使用,你还在用宝塔吗? - 立金哥

    AppNode 简介AppNode 是一款用于管理 Linux 服务器的软件,它基于 Web 页面进行可视化操作,不但可以帮助不熟悉 Linux 命令的用户无障碍地管理他们的 Linux 服务器,也可...

    2024-02-01 04:36:59