laravel 7 H-ui模板ajax批删

1，HTML页面写一个button按钮

<a href="javascript:;" onclick="deleteAll()" class="btn btn-danger radius"><i
                    class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>

 

复选框中定义值id

  <td><input type="checkbox" value="{{$item->id}}" name="id[]"></td>

 2：增加点击事件

  {{--    批量删除--}}
    function deleteAll() {
//    定义一个空的数组
        var checkeds = [];
        //定义_token，否则报419错误
        const _token = "{{csrf_token()}}"
//匹配所有选中的复选框
        $('input[name="id[]"]:checked').each(function (k, v) {
            checkeds.push(v.value);
        })
        //如果复选框选中，发送请求至后台，进行删除
        if (checkeds.length > 0) {
            $.ajax({
                url: '/admin/delall',
                type: 'POST',
                data: {
                    checkeds,
                    _token
                },
                dataType: 'JSON',
                success: function (res) {
                    if (res.code == 200) {
//前端移除，并刷新
                        $('#checked').remove();
                        layer.msg('已删除!', {icon: 1, time: 1000});
                        location.reload()
                    } else {
                        layer.msg('删除失败!', {icon: 2, time: 1000});
                    }
                }
            })
        } else {
            layer.msg('至少选择一项在进行批量删除吧!', {icon: 2, time: 1000});
        }
    };

3：经路由发送至后端

//批量删除

Route::group(['prefix'=>'admin','namespace'=>'admin'],function (){

    Route::post('delall','UserController@delall');
}

4：控制器代码：

//批量删除
        public function delAll(Request $request){
               $ids=$request->post('checkeds');
                $res=UserModel::delAll($ids);
                if ($res!==false){
                    return ['code'=>200,'message'=>'批删成功','data'=>[]];
                }
                return ['code'=>500,'message'=>'批删失败','data'=>[]];

        }

5：模型代码：

//批删
    public static function delAll($ids){
            return self::destroy($ids);
    }

 

 

也可参考以下方法：

HTML：

    <a class="btn btn-danger radius" onclick="deleteAll()">
                <i class="Hui-iconfont">&#xe6e2;</i> 批量删除
            </a>

 

script　　

 // 全选删除
    function deleteAll() {
        // 询问框
        layer.confirm('您是真的要删除选中的用户吗？', {
            btn: ['确认删除', '思考一下']
        }, () => {
            // 选中的用户
            let ids = $('input[name="id[]"]:checked');
            // 删除的ID
            let id = [];
            // 循环
            $.each(ids, (key, val) => {
                // dom对象 转为 jquery对象 $(dom对象)
                // id.push($(val).val());
                id.push(val.value);
            });
            if (id.length > 0) {
                // 发起ajax
                $.ajax({
                    url: "/fangower/"+id,
                    data: {id, _token},
                    type: 'DELETE'
                }).then(ret => {
                    if (ret.code == 200) {
                        layer.msg(ret.msg, {time: 2000, icon: 1}, () => {
                            location.reload();
                        })
                    }else {
                        layer.msg(ret.msg, {time: 2000, icon: 5}, () => {
                            location.reload();
                        })
                    }
                })

            }

        });


    }

控制器：

public function delall(Request $request) {
        $ids = $request->get('id');
        User::destroy($ids);

        return ['code'=>200,'msg'=>'全选删除成功'];
    }