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

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

作者头像
Meng小羽
修改2019-12-23 15:29:55
7740
修改2019-12-23 15:29:55
举报
文章被收录于专栏:Debug客栈Debug客栈

其实在这里,我并没有把数据进行删除,而是把数据库中设置了一个状态值,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="/admin/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(
            //请求地址及参数
            '/admin/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协议进行许可,转载请保留此文章链接

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 路由设置
  • 前台代码
  • 前台JS处理代码
  • 后端处理代码
相关产品与服务
数据库
云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档