Debug客栈
做一个爱分享的程序猿
Debug客栈
Laravel5.8使用LayUI实现批量删除

友情提示:此篇文章大约需要阅读 11分钟32秒,不足之处请多指教,感谢你的阅读。订阅本站

问题同样困扰好久,前几天是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 协议进行许可,转载请保留此文章链接
相关链接: Debug客栈  |  引导页  |  加入交流群  |  赞助本站  |  @微博  |  @Bilibili  |  @推特  |  @Github
社会主义核心价值观: 富强、民主、文明、和谐、自由、平等、公正、法治、爱国、敬业、诚信、友善

发表评论

textsms
account_circle
email

Debug客栈

Laravel5.8使用LayUI实现批量删除
问题同样困扰好久,前几天是CSRF认证问题,今天遇到了批量删除选择选中元素的问题,网上查找了好多代码,可算是把这个业务逻辑实现了,鼓掌,接下来听听我的解决方案吧,主要就是LayUI中…
扫描二维码继续阅读
2019-05-16