layui表单动态CURD功能

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、手残党的搬砖添瓦
  • 二、使用步骤
    • 1.引入CSS,JS样式
    • 2.CURD实操
  • 总结


前言

时间:2022-11-15
风吹一片叶,万物已惊秋

利用空余时间写了一个layui粗糙demo,有参考官方文档和借鉴博客主的地方仅供参考!


提示:以下是本篇文章正文内容,下面案例可供参考

一、手残党的搬砖添瓦

前端控件能CP就CP 能不用脑子坚决Say No

二、使用步骤

1.引入CSS,JS样式

代码如下(示例):

<head>
    <!--引用 layui.css,注意路径要写自己项目的-->
    <!--<link rel="stylesheet" href="/js/layui-v2.6.8/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048355" media="all"/>-->
    <link rel="stylesheet" href="/js/layui-v2.6.8/layui/css/layui.css" media="all">
</head>
<body>
<!--引用 layui.js和jQuery,注意路径要写自己项目的-->
<script src="/js/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="/js/layui-v2.6.8/layui/layui.js"></script>
<script src="/js/vue.min.js"></script>
</body>

2.CURD实操

代码如下(示例):

<body>
<div id="app">
    <form class="layui-form" lay-filter="userForm">
        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-block">
                    <input type="text" name="userName" placeholder="请输入名称"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-inline">
                    <input type="text" name="userAddress" placeholder="请输入内容"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="search">查询</button>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="layui-row" id="TK_layForm" style="display:none;position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;">
    <div class="layui-col-md11">
        <form id="tk_form" lay-filter="ht_form" class="layui-form" action="" style="margin-top: 20px;align:center;">
            <!--隐藏字段id,区分添加和修改-->
            <input type="hidden" name="userId"/>
            <!--lay-verify验证的值:required(必填项),phone(手机号),email(邮箱)
            url(网址),number(数字),date(日期),identity(身份证)
            自定义值-->
            <div class="layui-form-item">
                <label class="layui-form-label">用户名:</label>
                <div class="layui-input-block">
                    <input type="text" name="userName" id="name" 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="userDate" 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="userAddress" lay-verify="required" placeholder="请填写地址" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-radius layui-btn-normal" lay-filter="btn_submit" lay-submit>提交</button>
                    <!--<input type="button" class="layui-btn layui-btn-radius layui-btn-normal" value="确认" onclick="" />-->
                    <button type="reset" class="layui-btn layui-btn-radius layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!--复选数据表格组件-->
<table class="layui-hide" id="tb-users" lay-filter="tb-users" cyProps="url:'/user/add',checkbox:'true',pageColor:'#2991d9'"></table>

<!--<script type="text/html" id="tool_bar">-->
    <!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
    <!--<a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>-->
<!--</script>-->
<script type="text/html" id="tool_bar">
    <a lay-event="detail" title="查看"><i class="layui-icon">&#xe63c;</i></a>
    <a lay-event="edit" title="编辑"><i class="layui-icon">&#xe642;</i></a>
    <a lay-event="del" title="删除"><i class="layui-icon">&#xe640;</i></a>
</script>

<!--分页组件-->
<div id="laypage-user"></div>

<!--选项卡  简洁风格的TabTab组件-->
<div class="layui-tab layui-tab-brief" lay-filter="lb_parent">
    <!--Tab 标题-->
    <ul class="layui-tab-title">
        <li class="layui-this">轮播图展示</li>
        <li>日期</li>
        <li>分页</li>
        <li>上传</li>
        <li>滑块</li>
    </ul>
    <div class="layui-tab-content">
        <!--轮播图控件-->
        <div class="layui-tab-item layui-show">
            <div class="layui-carousel" id="lb_show">
                <div carousel-item>
                    <div><p class="layui-bg-green demo-carousel">最伟大的作品</p></div>
                    <div><p class="layui-bg-red demo-carousel">Mojito</p></div>
                    <div><p class="layui-bg-blue demo-carousel">晴天</p></div>
                    <div><p class="layui-bg-orange demo-carousel">稻香</p></div>
                    <div><p class="layui-bg-cyan demo-carousel">以父之名</p></div>
                </div>
            </div>
        </div>

        <!--日期-->
        <div class="layui-tab-item">
            <div id="laydateDemo"></div>
        </div>
        <!--分页-->
        <div class="layui-tab-item">
            <div id="pageDemo"></div>
        </div>
        <!--上传-->
        <div class="layui-tab-item">
            <!--上传组件-->
            <div class="layui-upload-drag" id="uploadDemo">
                <i class="layui-icon"></i>
                <p>点击上传,或将文件拖拽到此处</p>
                <div class="layui-hide" id="uploadDemoView">
                    <hr>
                    <img src="" alt="上传成功后渲染" style="max-width: 100%">
                </div>
            </div>
        </div>
        <!--滑块-->
        <div class="layui-tab-item">
            <div id="sliderDemo" style="margin: 50px 20px;"></div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript">
    var vm;
    layui.use(['table', 'form', 'laypage', 'layer'], function () {
        var table = layui.table;
        var laypage = layui.laypage;
        var form = layui.form;
        var laydate = layui.laydate;//日期
        var table = layui.table;//表格
        var carousel = layui.carousel;//轮播
        var upload = layui.upload;//上传
        var element = layui.element;//元素操作
        var slider = layui.slider;//滑块
        var dropdown = layui.dropdown;//下拉菜单
        var page, limit;//分页参数

        layer.msg('今天有坚持学习么?', {icon: 6});
        vm = new Vue({
            el: '#app',
            data: {},
            methods: {
            },
            created: function () {
                console.log("Vue实例1...");

            },
            mounted: function () {
                console.log("Vue实例2...");
            }

        });

        //监听Tab切换
        element.on('tab(lb_parent)', function (data) {
            layer.tips('切换了 ' + data.index + ':' + this.innerHTML, this, {
                tips: 1
            });
        });

        //第一个实例
        table.render({
            elem: '#tb-users'
            , height: 420
            , url: '/user/list'
            , even: true
            , count: 55
            , title: '用户表'
            , page: true //开启分页
            , toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
            , totalRow: true //开启合计行
            // , page: {//支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
            //     layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] //自定义分页布局
            //     ,curr: 1 //设定初始在第 5 页
            //     ,count: 53 //只显示 1 个连续页码
            //     ,first: false //不显示首页
            //     ,last: false //不显示尾页
            // }
            , cols: [    //表头
                [
                    {type: 'checkbox'},//复选框
                    {field: 'userId', title: '用户ID', width: 150}
                    , {field: 'userName', title: '用户名', width: 150}
                    , {field: 'userDate', title: '时间', width: 200}
                    , {field: 'userAddress', title: '地址', width: 300}
                    ,{fixed: 'right',title: '操作', width: 165, align:'center', toolbar: '#tool_bar'}
                ]
            ]
            // ,response: {
            //     statusCode: 200 //重新规定成功的状态码为 200,table 组件默认为 0
            // }
            , parseData: function (res) { //res 即为原始返回的数据
                // console.log(res.data.list);
                // console.log(res.code);
                return {
                    "code": 0,
                    "data": res.data.list //解析数据列表
                };
            }
        });

        /**
         * 监听头工具栏事件
         * toolbar - 绑定工具条模板
         * 通常你需要在表格的每一行加上 查看、编辑、删除 这样类似的操作按钮,
         * 而 tool 参数就是为此而生,你因此可以非常便捷地实现各种操作功能。
         * tool 参数和 templet 参数的使用方式完全类似,通常接受的是一个选择器,也可以是一段HTML字符。
         */
        table.on('toolbar(tb-users)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            console.log(checkStatus);
            // var data = obj.data; //获得当前行数据
            // var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
            // var tr = obj.tr; //获得当前行 tr 的 DOM 对象(如果有的话)
            console.log(obj.event);
            switch (obj.event) {
                case 'add':
                    layer.msg('添加');
                    tk_form('添加','',500,400);
                    $("#tk_form").setForm({id:''});
                    break;
                case 'update':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else if (data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        // layer.alert('编辑 [id]:' + data[0].userId);
                        tk_form('编辑','',600,600);
                        form.val("ht_form",{
                            "userId":data[0].userId,
                            "userName":data[0].userName,
                            "userDate":data[0].userDate,
                            "userAddress":data[0].userAddress
                        });
                    }
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        layer.msg('删除');
                    }
                    break;
            }
            ;
        });


        //监听提交
        form.on('submit(search)', function (data) {
            //获取表单区域所有值
            var result = form.val("userForm");
            // console.log("form表单中的数据:" + data1);
            // console.log("展示值:" + data1);
            // console.log(data1.userName);
            // layer.msg("表单按钮...");
            // console.log("formDemo:" + data.field);
            // console.log("展示值:"+data);
            // console.log(data.field.userName);

            table.reload('tb-users', {
                page: {
                    curr: 1
                },
                where: {
                    userName: result.userName,
                    userAddress: result.userAddress
                },
                url: '/user/sel'
            });

            return false;
        });

        form.on('submit(btn_submit)', function(data){
            // console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象
            // console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}
            // layer.msg(JSON.stringify(data.field));
            $.post(
                "/user/add",
                data.field,
                function(res){
                    if(res.status){
                        layer.msg(res.message, {time: 2000});
                        var url = "/user/login";
                        setTimeout(window.location.href=url,2000);
                    }else{
                        layer.msg(res.message, {time: 2000});
                    }
                },'json');
            return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
        });

        //分页
        // laypage.render({
        //     elem: 'laypage-user',
        //     limit: 10,
        //     count: 55,
        //     curr: 1,
        //     layout: ['limit', 'prev', 'page', 'next', 'skip'],
        //     prev: '上一页',
        //     next: '下一页',
        //     start: '首页',
        //     end: '尾页',
        //     jump: function (obj, first) {
        //         var result = [];
        //         var page = obj.curr;
        //         var limit = obj.limit;
        //         //后端逻辑
        //         // console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
        //         // console.log(obj.limit); //得到每页显示的条数
        //         $.ajax({
        //             type: 'post',
        //             url: 'http://localhost:8080/user/list?page=' + page + '&limit=' + limit,
        //             data: result,
        //             dataType: "json",
        //             async: true,
        //             success: function (result) {
        //                 // console.log("结果集1:" + result);
        //                 if (result.code == 200) {
        //                     var data = result.data.list;
        //                     // console.log(result.data.list);
        //                     tableDrawing(data, limit) // 数据传到 table组件
        //                 } else {
        //                     console.log("结果集2:" + result);
        //                 }
        //             },
        //             error: function () {
        //                 console.log('访问失败');
        //             }
        //         });
        //     }
        //
        // });
        //执行一个轮播实例
        carousel.render({
            elem: '#lb_show'
            , width: '100%' //设置容器宽度
            , height: 200
            , arrow: 'none' //不显示箭头
            , anim: 'fade' //切换动画方式
        });

        //获取后端JSON数据
        function getTableData() {
            var data = [];
            $.ajax({
                type: 'post',
                url: 'http://localhost:8080/user/list?page=' + page + '&limit=' + limit,
                data: result,
                dataType: "json",
                async: true,
                success: function (result) {
                    console.log(result);
                    if (result.code == 200) {
                        var data = result.resultSet;
                        tableDrawing(data) // 数据传到 table组件
                    } else {
                        console.log(result);
                    }
                },
                error: function () {
                    console.log('访问失败');
                }
            });
        };

        //渲染表格
        function tableDrawing(data, page_count) {
            layui.table.render({
                elem: '#tb-user',
                cols: [    //表头
                    [
                        {type: 'checkbox'},//复选框
                        {field: 'userId', title: '用户ID', width: 150}
                        , {field: 'userName', title: '用户名', width: 150}
                        , {field: 'userDate', title: '时间', width: 200}
                        , {field: 'userAddress', title: '地址', width: 300}
                    ]
                ],
                data: data, // 数据
                limit: page_count, // 每页显示的条数
                even: true
            });
        };

        function pagesDrawing(data) {
            layui.laypage.render({
                elem: 'laypage-user',
                limit: 10,
                curr: 1,
                layout: ['limit', 'prev', 'page', 'next', 'skip'],
                prev: '上一页',
                next: '下一页',
                start: '首页',
                end: '尾页',
                count: data.resultnNoList, //数据总数,从服务端得到
                theme: '#0078ff',
                limit: page_count, // 每页条数
                // layout: ['prev', 'page', 'next', 'count'],
                jump: function (obj, first) {
                    //console.log(obj)
                    //obj包含了当前分页的所有参数,比如:
                    //console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
                    //console.log(obj.limit); //得到每页显示的条数

                    //首次不执行
                    if (!first) {
                        numpage(obj.curr, obj.limit) // 分页点击传参
                    }
                }
            });
        };

        function numpage(curr, page_count) { // 分页切换-数据请求
            var page_b = (curr - 1) * page_count;
            var list_parameter = {
                //当前页
                page_b: page_b,
                //分页数
                page_count: page_count
            };
            // if (isSearch) { // 搜索列表
            //     var key = 'team_name';
            //     var value = keywords;
            //     list_parameter[key] = value;
            // }
            $.ajax({
                type: 'post',
                url: 'http://localhost:8080/user/login',
                data: list_parameter,
                dataType: "json",
                async: true,
                success: function (result) {
                    console.log(result);
                    if (result.code == 200) {
                        var data = result.resultSet;
                        tableDrawing(data) // 数据传到 table组件
                    } else {
                        console.log(result);
                    }
                },
                error: function () {
                    console.log('访问失败');
                }
            });
        };

        var index;//layer.open 打开窗口后的索引,通过layer.close(index)的方法可关闭
        //表单弹出层
        function tk_form(title, url, w, h) {
            if (title == null || title == '') {title = false;};
            if (url == null || url == '') {};// url="404.html";
            if (w == null || w == '') {w = ($(window).width() * 0.9);};
            if (h == null || h == '') {h = ($(window).height() - 50);};
            index = layer.open({  //layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
                type: 1,
                title: title,
                area: ['25%', '55%'],//类型:String/Array,默认:'auto'  只有在宽高都定义的时候才不会自适应
                // area: [w+'px', h +'px'],
                fix: false, //不固定
                maxmin: true,//开启最大化最小化按钮
                shadeClose: true,//点击阴影处可关闭
                shade: 0.4,//背景灰度
                skin: 'layui-layer-rim', //加上边框
                content: $("#TK_layForm").html()
            });
        }

    });
</script>

总结

前端框架千千万 虐我一遍又一遍
Peace&Love

你可能感兴趣的:(前端框架,layui,javascript,vue.js)