devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

tp + layui表格 \ 重载 \ 单个 \多选删除_thinkphp layui 增删改查

作者：AllinToyou | 2024-02-17 06:07:37

赞

踩

thinkphp layui 增删改查

html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>

</head>
<body>
<div class="demoTable">
    搜索ID：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload" id="search">搜索</button>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="excel">导出</button>
        <button class="layui-btn layui-btn-sm" lay-event="allDel">全选删除</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="image">
    {{# if(d.avatar){ }}
    <img src="{{d.avatar}}" alt="" width="100px">
    {{# }else{ }}
    <span style="text-align: center"> 没有图片 </span>
    {{# } }}
</script>

<script type="text/html" id="is_status">
    {{#  if(d.status == 1){ }}
    <input type="checkbox" name="menuDisplay" value="{{d.status}}" lay-skin="switch" lay-text="认证|未认证"
           lay-filter="isShow" checked>
    {{#  } else { }}
    <input type="checkbox" name="menuDisplay" value="{{d.status}}" lay-skin="switch" lay-text="认证|未认证"
           lay-filter="isShow">
    {{#  } }}
</script>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
    layui.use('table', function () {
        var table = layui.table, $ = layui.$;

        table.render({
            elem: '#test'
            , url: 'index'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , title: '用户数据表'
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true}
                , {field: 'username', title: '用户名', width: 120, edit: 'text'}
                , {field: 'avatar', title: '头像', width: 120, templet: "#image"}
                , {
                    field: 'email', title: '邮箱', width: 150, edit: 'text', templet: function (res) {
                        return '<em>' + res.email + '</em>'
                    }
                }
                , {field: 'status', title: '状态', width: 120, templet: "#is_status"}
                , {field: 'sex', title: '性别', width: 80, edit: 'text', sort: true}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]]
            , id: 'testReload'
            , page: true
            , limit: 5
            , limits: [5, 10, 15, 20]
        });
        //表格重载
        $('#search').click(function () {
            var demoReload = $('#demoReload');
            //执行重载
            table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {
                    keyword: demoReload.val()
                }
            });
        })

        var del = function (ids) {
            $.ajax({
                url: 'allDel',
                data: {ids},
                type: "delete",
                dataType: 'json',
            }).then(res => {
                if (res.code == 200) {
                    layer.msg(res.msg, {icon: 1});
                    setTimeout(function () {
                        location.reload();//刷新
                    }, 2000);
                }
                layer.msg(res.msg, {icon: 3})
            })
        }

        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 2
                        , id: 'layerDemo'  //防止重复弹出
                        , title: '用户添加'
                        , content: 'save'
                        , area: ['800px', '600px']
                        , shade: 0 //不显示遮罩
                        , yes: function () {
                            layer.closeAll();
                        }
                    });
                    break;
                case 'excel':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'allDel':
                    var data = checkStatus.data;
                    console.log(data);
                    if (data.length <= 0) {
                        layer.msg('请选择需要删除的信息');
                        return false;
                    }
                    layer.confirm('确定删除吗 ?', {icon: 3, title: '删除提示'}, function (index) {
                        //do something
                        var ids = [];
                        $.each(data, function (k, v) {
                            // console.log(v);
                            ids.push(v.id)
                        });
                        // console.log(ids);
                        del(ids);
                        layer.close(index);
                    });
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            }
            ;
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            // console.log(data.id);
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    del(data.id);
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {

                layer.open({
                    type: 2
                    , id: 'layerDemo'  //防止重复弹出
                    , title: '用户修改'
                    , content: 'edit?id=' + id
                    , area: ['800px', '600px']
                    , shade: 0 //不显示遮罩
                    , yes: function () {
                        layer.closeAll();
                    }
                });
            }
        });
    });
</script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195

PHP后台

   public function index()
    {
        if (\request()->isAjax()){

            $page = input('page');//页码
            $limit = intval(\request()->get('limit'));//分页数量
            $offset = ($page-1)*$limit;//起始页
            $keyword = input('keyword') ?? ''; //搜索词
            // 搜索 查询
            $lists = \app\model\User::when($keyword ,function($query) use($keyword){
               return $query->where('username|email', 'like',"%{$keyword}%");
            })->withoutField('password');
            $count = $lists->count();// 数据总数 必须字段 否则 不能分页
            $data = $lists->limit($offset,$limit)->select();
            // 接口 三要数 code 必须为 0 否则 表格 不渲染数据
            return json(['code'=>0,'msg'=>'success','data'=>$data,'count'=>$count]);
        }
        return view();

    }


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

PHP 后台 逻辑

	/**
	* 用户信息保存更新
	*/
   public function save(Request $request)
    {
        //
        $params = input();
        $model = \app\model\User::where('id',$params['id'])->update($params);
        if ($model) return json(['code' => 200, 'msg' => 'ok', 'data' =>'']);
        return json(['code' => 200, 'msg' => '信息保存失败', 'data' => '']);

    }

    /**
     * 显示指定的资源
     *
     * @param int $id
     * @return \think\Response
     */
    public function read($id)
    {
        //
        if (!is_numeric($id)) return json(['code' => 1001, 'msg' => '参数不正确', 'data' => '']);
        $user = \app\model\User::read($id);
        if ($user) return json(['code' => 200, 'msg' => 'ok', 'data' => $user]);
    }

	/**
	* 用户头像上传 到七牛云
	*/
    public function avatar(Request $request)
    {
        $file = $request->file('file');
        $img = Upload::upload($file);
        $thumb = Upload::my_thumb($img);
        $img = Upload::qiniu($thumb);
        return json(['code'=>200,'msg'=>'ok','data'=>$img]);
    }


    public function delete($id)
    {
        if (!is_numeric($id)) return json(['code' => 1001, 'msg' => '参数不正确', 'data' => '']);
        $model = \app\model\User::destroy($id);
        if (!$model) return json(['code' => 1001, 'mag' => '删除失败', 'data' => '']);
        return json(['code' => 200, 'msg' => '删除成功', 'data' => $id]);
    }
	//多选删除 
    public function allDel(){
        $ids = input('ids');
        $list = \app\model\User::whereIn('id',$ids )->delete();

        if (!$list) return json(['code' => 1001, 'msg' => '删除失败', 'data' => '']);
        return json(['code' => 200, 'msg' => '删除成功', 'data' => '']);
    }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/100757
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号