专栏首页Debug客栈Laravel5.8使用LayUI实现批量删除

Laravel5.8使用LayUI实现批量删除

问题同样困扰好久,前几天是CSRF认证问题,今天遇到了批量删除选择选中元素的问题,网上查找了好多代码,可算是把这个业务逻辑实现了,鼓掌,接下来听听我的解决方案吧,主要就是LayUI中的from组件的checkbox监听事件,接下来看debug过程吧!

路由设置

Laravel比较人性化的原因之一就是路由自定义化程度高,可以说开发是这个流程: 路由设置->前台数据获取请求后台->后台控制器获取参数响应并回馈前台 这里我是用的是JSON传值,还是比较人性化的。

//图片批量删除
Route::post('pic/delAll', 'PicController@delAll');

前台界面设计

<!-- 批量删除按钮及响应事件 -->
<button class="layui-btn layui-btn-danger" onclick="delAll()">
    <i class="layui-icon layui-icon-delete"></i>批量删除
</button>
<!-- 表格设计 -->
  <table class="layui-table"> 
   <thead> 
    <tr> 
     <th> 
      <div class="layui-form"> 
       <input type="checkbox" name="check_all" id="" lay-skin="primary" /> 
      </div> </th> 
     <th>ID</th> 
     <th>标题</th> 
     <th>缩略图</th> 
     <th></th> 
    </tr> 
   </thead> 
   <tbody>
    @foreach($data as $value) 
    <tr> 
     <td> 
      <div class="layui-form"> 
       <input type="checkbox" value="{{ $value->id }}" lay-skin="primary" lay-filter="RandomCheckbox" /> 
      </div> </td> 
     <td>{{ $value->id }}</td> 
     <td>{{ $value->title }}</td> 
     <td> <img class="layui-nav-img" src="{{ url($value->img) }}" alt="{{ $value->title }}" /></td> 
     <td> <button class="layui-btn layui-btn-sm layui-btn-normal layui-btn-radius"> <i class="layui-icon layui-icon-edit"></i> </button> <button class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius" href="javascript:;" onclick="del(this, {{ $value->id }});"> <i class="layui-icon layui-icon-delete"></i> </button> </td> 
    </tr>@endforeach
   </tbody> 
  </table>

核心代码:

<div class="layui-form"> 
       <input type="checkbox" value="{{ $value->id }}" lay-skin="primary" lay-filter="RandomCheckbox" /> 
 </div>

前台JS代码设计

<script>
    /**
     * 网页作用域变量定义区
     */
    var arr=[]; //存储checkbox选中数值

    /**
     * layui组件初始化
     */
    layui.use(['element', 'form'], function () {
        form = layui.form;

        //checkbox监听响应并且存储到数组中
        form.on('checkbox(RandomCheckbox)', function(data){
            //判断数值是否存在
            var index = arr.indexOf(data.value);
            if(index>=0){
                //已经存在改元素,按照重复点取消数值原则,
                // 删除操作,并且获取要删除元素对应数组的下标
                var subscript = subScript(arr, data.value);
                //删除对应下标元素 splice函数
                arr.splice(subscript, 1);
            }else{
                arr.push(data.value);
            }
        });
    });

    /**
     * 获取数组对应元素下标方法
     * @param arr
     * @param data
     * @returns {number|*}
     */
    function subScript(arr, data){
        //获取数组长度
        var i = arr.length;
        //遍历判断数组对应元素并返回下标
        while(i--){
            if(arr[i] === data){
                return i;
            }
        }
        return -1;
    }
    /**
     * 批量删除方法
     */
    function delAll(){
        //判断数组中是否有元素存在
        var long = arr.length;
        if(long == 0){
            layer.msg("你还没有选择要删除的行,请选择");
            return;
        }
        layer.confirm('确定要删除么?', {
            btn: ['确定','取消']
        }, function() {
            //将数组转换为字符串
            //注意:arr定义为此页面作用域变量
            str = arr.join(',');

            //传输给后台数据 ajax请求
            $.post(
                //请求地址
                '/admin/pic/delAll',
                //数据类型 请求方式 及 CSRF认证
                {'str':str, '_method':'post', '_token':'{{ csrf_token() }}'},
                //回调处理结果并显示界面
                function(res){
                    //如果大于0,则表示成功
                    if(res.code>0){
                        layer.alert(res.msg,{icon:2})
                    }else{
                        layer.msg(res.msg);
                        setTimeout(function(){window.location.reload();}, 1000)
                    }
                },
                'json'
            );

        });
    }
</script>

这个代码的业务逻辑是:

  1. 首先定义页面作用域数组arr进行接收选择事件;
  2. 获取页面点击checkbox事件所传递的值,并进行判断是否取消其选择或者再次选中,(选中第一次进行push压栈一下数组,选择第二次就要判断数组中是否存在,若存在则获取元素对应下标并且做出splice删除操作,以此类推);
  3. 点击按钮时,将数组转换为string字符串类型之后采用Ajax的方式传至后台控制器;
  4. 后台控制器进行操作返回状态值;
  5. 前台获取状态值进行反馈用户,此业务逻辑完成。

Controller后台控制器

在这里可以注意到的是Laravel可以直接删除字符串形式的元素,使用了in($str)的方式。

/**
 * 批量删除
 * @param Request $request
 */
public function delALL(Request $request){
    $id = $request->input('str');
    $sql = DB::update("update pic set status=1 where id in($id)");
    if($sql){
        exit(json_encode(array('code'=>0, 'msg'=>'删除成功')));
    }else{
        exit(json_encode(array('code'=>1, 'msg'=>'删除出现异常')));
    }
}

好了,以上就是我解决的这个问题的方式,有疑问评论区问我即可。

本文链接:https://www.debuginn.cn/2196.html

本文采用CC BY-NC-SA 3.0 Unported协议进行许可,转载请保留此文章链接

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 蓝桥杯 基础练习 十六进制转八进制

      输入的第一行为一个正整数n (1<=n<=10)。   接下来n行,每行一个由0~9、大写字母A~F组成的字符串,表示要转换的十六进制正整数,每个十六进制数...

    Debug客栈
  • 软件工程 包图习题

    3、包内的元素可以被包内的元素、继承的子包元素所访问是指包的____B_____。

    Debug客栈
  • PHP常用函数 常用数组函数

    数组是PHP中一个常见的数据类型,其中PHP封装了许多有关数组处理的PHP函数,过去的几个月由于使用框架进行逻辑操作多一些,对数据的操作特别是数组的操作少之又少...

    Debug客栈
  • 小兔JS教程(四)-- 彻底攻略JS数组

    剽悍一小兔
  • 各种排序算法

    冒泡排序还有一种优化算法,就是立一个flag,当在一趟序列遍历中元素没有发生交换,则证明该序列已经有序

    柳醉梦声
  • 前端开发:javascript数组排序

    序),就像水底下的气泡一样逐渐向上冒泡,所以被称为“冒泡”排序。冒泡排序的最坏时间复杂度为O(n2),平均时间复杂度为O(n2)。

    用户4831957
  • 登录-Thinkphp5.1开发后台管理系统

    将config目录下的app.php文件(thinkphp5.1版本核心配置文件)内的路由配置项设置为开启状态;

    申霖
  • PHP实现四种基本排序算法

    前提:分别用冒泡排序法,快速排序法,选择排序法,插入排序法将下面数组中的值按照从小到大的顺序进行排序。 $arr(1,43,54,62,21,66,32,78,...

    公众号php_pachong
  • PHP实现四种基本排序算法

    许多人都说算法是程序的核心,算法的好坏决定了程序的质量。作为一个初级phper,虽然很少接触到算法方面的东西。但是对于基本的排序算法还是应该掌握的,它是程序开发...

    wangxl
  • 题目1054:字符串内排序

    题目描述: 输入一个字符串,长度小于等于200,然后将输出按字符顺序升序排序后的字符串。 输入: 测试数据有多组,输入字符串。 输出: 对于每组输入,输出处理后...

    用户1631856

扫码关注云+社区

领取腾讯云代金券