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