SpringBoot2+Layui表格数据的增删查改

最新推荐文章于 2024-05-23 12:27:27 发布

Hadoop_Liang

最新推荐文章于 2024-05-23 12:27:27 发布

阅读量1.9k

点赞数 4

分类专栏： SpringBoot 前端文章标签： LayUI SpringBoot

本文链接：https://blog.csdn.net/qq_42881421/article/details/103691160

版权

SpringBoot 同时被 2 个专栏收录

10 篇文章 2 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

启动SpringBoot项目后，浏览器访问：http://localhost:8082/table.html

最终效果如下：

SpringBoot负责提供数据的增删查改方法，LayUI负责显示数据及管理数据。

项目结构

重点展示LayUi部分代码：

table.html

<!DOCTYPE html>
<html>
<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">
    <title>layui 后台table调试</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>

<!-- <table class="layui-hide" id="demo" lay-filter="test"></table> -->
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="currentTableBar">
    <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
</script>


<!--点击后才显示-->
<div class="layui-row" id="popUpdateTest" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" lay-filter="aaa" action="" style="margin-top:20px">
            <!--不加id，更新时找不到id，更新会失败, 添加hidden属性隐藏-->
            <div class="layui-form-item" hidden="true">
                <label class="layui-form-label">编号</label>
                <div class="layui-input-block">
                    <input type="text" name="id" placeholder="请输入编号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">名字</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入名字" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男">
                    <input type="radio" name="sex" value="女" title="女" checked>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-block">
                    <input type="text" name="tell" required lay-verify="required" placeholder="请输入电话" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-block">
                    <input type="text" name="addr" required lay-verify="required" placeholder="请输入地址" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="demo11">确认修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>


<script src="layui/layui.js"></script>
<script>
    layui.use(['table', 'jquery', 'layer', 'form'], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;

        //表格数据
        table.render({
            elem: '#demo'
            ,height: 312
            ,url:"custumerTable" //数据接口
            ,request: {
                pageName:'current' //默认为page
                ,limitName:'size'  //默认为limit
            }
            , parseData: function (res) {
                console.log('返回的值', res);
                console.log('datalist', res.data.records);
                return {
                    "code": res.code, //code为0表格才能读到数据
                    "data": res.data.records, //解析数据列表
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度，一定要写这句，否则分页点不了
                };
            }

            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: '编号', width: 80, sort: true, fixed: 'left', totalRowText: '合计：'}
                , {field: 'name', title: '姓名', width: 80}
                , {field: 'sex', title: '性别', width: 80, sort: true}
                , {field: 'tell', title: '联系电话', width: 200}
                , {field: 'addr', title: '地址', width: 150}
                , {title: '操作', minWidth: 50, templet: '#currentTableBar', fixed: "right", align: "center"}
            ]]
            , page: true //开启分页
            , toolbar: 'default'//工具图标
        });


        //监听头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    layer.msg('添加');
                    adduser();
                    break;
                case 'update':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else if (data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：' + checkStatus.data[0].id);
                        var data1 = data[0];
                        console.log("新data1为：", data1);
                        updateuser(obj, data1);
                    }
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        console.log("data[0].id为", data[0].id);
                        layer.msg('删除');
                        deleteuser(data[0].id);
                    }
                    break;
            }
            ;
        });
        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            var id = data.id;//选中行的id
            console.log("data数据为：", data);
            console.log("id数据为：", data.id);
            if (obj.event === 'edit') {
                // layer.alert('编辑行：<br>' + JSON.stringify(data))
                updateuser(obj, data);
            } else if (obj.event === 'delete') {
                layer.confirm('真的删除行么', function (index) {
                    // obj.del();
                    layer.close(index);
                    deleteuser(id);
                });
            }
        });

        //添加用户
        function adduser() {
            layer.open({
                //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                type: 1,
                title: "修改客户信息",
                area: ['420px', '330px'],
                content: $("#popUpdateTest")//引用的弹出层的页面层的方式加载修改界面表单
            });
            console.log("测试输出");
            //监听提交
            form.on('submit(demo11)', function (message) {
                // console.log(data.field);
                var field = message.field;
                console.log(field);
                $.ajax({
                    type: "post",
                    url: "custumerTable/insert",
                    data: JSON.stringify(field),
                    contentType: 'application/json',
                    datatype: "json",
                    success: function (resp) {
                        console.log(resp);
                        layer.closeAll();//关闭所有的弹出层
                        if (resp.code == 0) {
                            layer.msg("添加成功", {icon: 6});
                            //刷新数据
                            $(".layui-laypage-btn").click();
                        } else {
                            layer.msg("添加失败", {icon: 5});
                        }
                    }
                });
                return false
            });

        }

        //编辑更新用户
        function updateuser(obj, data) {

            //回填数据到表单
            form.val("aaa", {
                "id": data.id
                , "name": data.name
                , "sex": data.sex
                , "tell": data.tell
                , "addr": data.addr
            });
            layer.open({
                //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                type: 1,
                title: "修改客户信息",
                area: ['420px', '330px'],
                content: $("#popUpdateTest")//引用的弹出层的页面层的方式加载修改界面表单
            });

            console.log("修改原始数据为：", data);
            console.log("id类型", typeof data.id);
            console.log("obj为：", obj);
            form.on('submit(demo11)', function (massage) {

                console.log("message为：", massage);
                console.log(massage.field);
                var data1 = massage.field;

                $.ajax({
                    type: "post",
                    url: "/custumerTable/update",
                    data: JSON.stringify(massage.field),
                    // data: { id: data.id, name: data1.name, sex: data1.sex, tell: data1.tell, addr: data1.addr },
                    contentType: 'application/json',
                    datatype: "json",
                    success: function (resp) {
                        console.log(resp);
                        layer.closeAll();//关闭所有的弹出层
                        if (resp.code == 0) {
                            layer.msg("修改成功", {icon: 6});
                            //刷新数据
                            $(".layui-laypage-btn").click();
                        } else {
                            layer.msg("修改失败", {icon: 5});
                        }
                    }
                })
                return false

            })
        }

        //删除用户
        function deleteuser(idList) {

            var url = "custumerTable/delete?idList=" + idList;
            console.log("url为：", url);
            $.ajax({
                type: "post",
                url: url,
                contentType: 'application/json',
                datatype: "json",
                success: function (resp) {
                    console.log(resp);
                    if (resp.code == 0) {
                        layer.msg("删除成功", {icon: 6});
                        //刷新数据
                        $(".layui-laypage-btn").click();
                    } else {
                        layer.msg("删除失败", {icon: 5});
                    }
                }
            })
            return false;
        }
    });
</script>
</body>
</html>

项目地址：

https://github.com/jipsonliang/SpringBoot-LayUI-Table-Demo

完成！ enjoy it!

Hadoop_Liang

关注

4
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot2+Layui表格数据的增删查改

启动SpringBoot项目后，浏览器访问：http://localhost:8082/table.html最终效果如下：SpringBoot负责提供数据的增删查改方法，LayUI负责显示数据及管理数据。项目结构重点展示LayUi部分代码：table.html<!DOCTYPE html><html><head>...
复制链接

扫一扫

专栏目录