前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Laravel5.8使用LayUI实现批量删除

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

作者头像
Meng小羽
发布2019-12-23 17:42:15
1.1K0
发布2019-12-23 17:42:15
举报
文章被收录于专栏:Debug客栈

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

路由设置

Laravel比较人性化的原因之一就是路由自定义化程度高,可以说开发是这个流程:

路由设置->前台数据获取请求后台->后台控制器获取参数响应并回馈前台

这里我是用的是JSON传值,还是比较人性化的。

代码语言:javascript
复制
//图片批量删除
Route::post('pic/delAll', 'PicController@delAll');

前台界面设计

代码语言:javascript
复制
<!-- 批量删除按钮及响应事件 -->
<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>

核心代码:

代码语言:javascript
复制
<div class="layui-form"> 
       <input type="checkbox" value="{{ $value->id }}" lay-skin="primary" lay-filter="RandomCheckbox" /> 
 </div>

前台JS代码设计

代码语言:javascript
复制
<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)的方式。

代码语言:javascript
复制
/**
 * 批量删除
 * @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://cloud.tencent.com/developer/article/1558263

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 路由设置
  • 前台界面设计
  • 前台JS代码设计
  • Controller后台控制器
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档