Laravel5.8使用LayUI实现动态删除

2019-12-23 15:29:55 浏览数 (1)

其实在这里,我并没有把数据进行删除,而是把数据库中设置了一个状态值,0代表着正常,而1代表着已经删除,本着数据保护的原则,便于记录用户的操作数据,便于后期的查找以及维护,废话不多说,上代码!

路由设置

代码语言:javascript复制
Route::delete('pic/destroy/{id}', 'PicController@destroy'); //图片单个删除控制器

前台代码

代码语言:javascript复制
<table class="layui-table" id="table">
    <thead>
    <tr>
        <th></th>
        <th>ID</th>
        <th>标题</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>
                <input type="text" onchange="change(this, {{ $value->id }});" class="layui-input" value="{{ $value->sort }}" name="sort">
            </td>
            <td>
                <img class="admin-pic-index-img" src="{{ url($value->img) }}" alt="{{ $value->title }}">
            </td>
            <td>
                <a class="layui-btn layui-btn-sm layui-btn-normal layui-btn-radius" href="/adminhttps://img.yuanmabao.com/zijie/pic/edit/{{ $value->id }}">
                    <i class="layui-icon layui-icon-edit"></i>
                </a>
                <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>

前台JS处理代码

代码语言:javascript复制
/**
 * 删除单个元素方法
 * @param obj
 * @param id
 */
function del(obj, id){
    layer.confirm('确定要删除么?', {
        btn: ['确定','取消']
    }, function(){
        $.post(
            //请求地址及参数
            '/adminhttps://img.yuanmabao.com/zijie/pic/destroy/' id,
            //数据 & 方式 & CSRF认证
            {'id':id,'_method':'delete', '_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'
        );
    });
}

后端处理代码

代码语言:javascript复制
/**
 * 删除图片操作
 * @param Request $request
 */
public function destroy(Request $request){
    $id = $request->id;
    $sql = DB::update('update pic set status=1 where id=?',[$id]);
    if($sql){
        exit(json_encode(array('code'=>0, 'msg'=>'删除成功')));
    }else{
        exit(json_encode(array('code'=>1, 'msg'=>'删除出现异常')));
    }
}

本文链接:https://cloud.tencent.com/developer/article/1557707

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

0 人点赞