layui的简单使用

刺骨的言语ヽ痛彻心扉 2023-10-11 15:58 24阅读 0赞

## admin.html ##

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>STC电子流平台对接演示</title>
        <link rel="stylesheet" href="./layui/css/layui.css">
    </head>
    <body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black">STC电子流客户端</div>
            
            <ul class="layui-nav layui-layout-left">
                
                <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                    <i class="layui-icon layui-icon-spread-left"></i>
                </li>
    
                <li class="layui-nav-item layui-hide-xs"><a href="">首页</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="">荣耀</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="">华为</a></li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                    <a href="javascript:;">
                        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic2%2Fcover%2F00%2F31%2F67%2F5810c4460e1ca_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630287917&t=11100ee7057ea4caf78a21bcd42931ea" class="layui-nav-img">
                        罗运永
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="">Your Profile</a></dd>
                        <dd><a href="">Settings</a></dd>
                        <dd><a href="">Sign out</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-more-vertical"></i>
                    </a>
                </li>
            </ul>
        </div>
    
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item layui-this"><a href="javascript:;" url="submit.html">表单提交</a></li>
                    <li class="layui-nav-item"><a href="javascript:;" url="view.html">查看待办</a></li>
                    <li class="layui-nav-item"><a href="javascript:;" url="viewed.html">查看已办</a></li>
                    <li class="layui-nav-item"><a href="javascript:;" url="trace.html">流程跟踪</a></li>
                </ul>
            </div>
        </div>
    
        <div class="layui-body">
            
            <iframe src="submit.html" frameborder="0" id="demoAdmin" style="width: 100%; height: 100%; border-radius: 2px;"></iframe>
        </div>
    
        <div class="layui-footer">
            
            XXXXX ©2021 Huaweicloud.com 版权所有 苏ICP备17040376号-32 苏B2-20130048号
        </div>
    </div>
    <script src="./layui/layui.js"></script>
    <script>
        //JS
        layui.use(['element', 'layer', 'jquery'], function(){
            var element = layui.element
                ,layer = layui.layer
                ,$ = layui.jquery
                ,mainBody = $(".layui-body");
    
            //菜单点击事件
            $("li a[url]").click(function () {
                mainBody.empty();
                mainBody.append('<iframe src="'+$(this).attr('url')+'" frameborder="0" id="demoAdmin" style="width: 100%; height: 100%; border-radius: 2px;"></iframe>');
            })
    
        });
    </script>
    </body>
    </html>

## submit.html ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单提交</title>
        <link rel="stylesheet" href="./layui/css/layui.css">
        <style>
            .layui-form-label {
                width: 100px;
            }
            .layui-input-block {
                margin-left: 130px;
            }
            .layui-form-mid {
                padding: 5px 0!important;
            }
            .layui-form-item .layui-input-inline {
                 width: 400px;
            }
        </style>
    </head>
    <body>
    
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>表单提交演示</legend>
    </fieldset>
    
    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">应聘人名称</label>
            <div class="layui-input-block">
                <input type="text" name="candidateName" autocomplete="off" placeholder="请输入名称" 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="candidateIDNumber" autocomplete="off" placeholder="请输入身份证号" 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="candidatePhone" autocomplete="off" placeholder="请输入手机号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">应聘人Email</label>
            <div class="layui-input-block">
                <input type="text" name="candidateEmail" autocomplete="off" placeholder="请输入Email" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">审批人</label>
            <div class="layui-input-inline">
                <input type="text" name="auditUser" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <button type="button" class="layui-btn layui-btn-sm">查询</button>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">审批组织</label>
            <div class="layui-input-inline">
                <input type="text" name="auditOrg" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <button type="button" class="layui-btn layui-btn-sm">查询</button>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </div>
    
    <script src="./layui/layui.js"></script>
    <script>
        layui.use(['form', 'layer', 'jquery'], function() {
            var form = layui.form
                ,$ = layui.jquery
                , layer = layui.layer;
    
            //监听提交
            form.on('submit(demo1)', function(data){
                var param = data.field;
                $.ajax({
                    url: 'fwqfgwq',
                    type: 'POST',
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(param),
                    beforeSend: function () {
                        layer.load(2);
                    },
                    complete: function () {
                        layer.closeAll('loading');
                    },
                    success: function (res) {
                        console.log(res)
                        layer.alert("提交成功", {icon: 1});
                    },
                    error: function (xhr) {
                        layer.alert("提交失败："+xhr.status, {icon: 2});
                    }
                });
    
                return false;
            });
        })
    </script>
    </body>
    </html>

## resubmit.html ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>重新表单提交</title>
        <link rel="stylesheet" href="./layui/css/layui.css">
        <style>
            .layui-form-label {
                width: 100px;
            }
            .layui-input-block {
                margin-left: 130px;
            }
            .layui-form-mid {
                padding: 5px 0!important;
            }
            .layui-form-item .layui-input-inline {
                 width: 400px;
            }
        </style>
    </head>
    <body style="padding-top: 30px;">
    <div class="layui-form" lay-filter="OrderForm">
        <div class="layui-form-item">
            <label class="layui-form-label">应聘人名称</label>
            <div class="layui-input-block">
                <input type="text" name="candidateName" autocomplete="off" placeholder="请输入名称" 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="candidateIDNumber" autocomplete="off" placeholder="请输入身份证号" 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="candidatePhone" autocomplete="off" placeholder="请输入手机号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">应聘人Email</label>
            <div class="layui-input-block">
                <input type="text" name="candidateEmail" autocomplete="off" placeholder="请输入Email" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">审批人</label>
            <div class="layui-input-inline">
                <input type="text" name="auditUser" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <button type="button" class="layui-btn layui-btn-sm">查询</button>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">审批组织</label>
            <div class="layui-input-inline">
                <input type="text" name="auditOrg" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <button type="button" class="layui-btn layui-btn-sm">查询</button>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">重新提交</button>
            </div>
        </div>
    </div>
    
    <script src="./layui/layui.js"></script>
    <script>
        layui.use(['form', 'layer', 'jquery'], function() {
            var form = layui.form
                ,$ = layui.jquery
                , layer = layui.layer
                ,currentIndex = parent.layer.getFrameIndex(window.name);
    
            var obj = parent.cData;
            form.val("OrderForm", {
                "candidateName":obj.candidateName,
                "candidateEmail":obj.candidateEmail
            });
    
            //监听提交
            form.on('submit(demo1)', function(data){
                var param = data.field;
                console.log(param)
                $.ajax({
                    url: 'fwqfgwq',
                    type: 'POST',
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(param),
                    beforeSend: function () {
                        layer.load(2);
                    },
                    complete: function () {
                        layer.closeAll('loading');
                    },
                    success: function (res) {
                        console.log(res)
                        layer.alert("提交成功", {icon: 1});
                        parent.layer.close(currentIndex);
                    },
                    error: function (xhr) {
                        layer.alert("提交失败："+xhr.status, {icon: 2});
                    }
                });
    
                return false;
            });
        })
    </script>
    </body>
    </html>

## view.html ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>查看待办</title>
        <link rel="stylesheet" href="./layui/css/layui.css">
        <style>
            .layui-form-mid {
                padding: 0 0!important;
            }
            .layui-form-item .layui-input-inline {
                width: 400px;
            }
        </style>
    </head>
    <body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>查看待办演示</legend>
    </fieldset>
    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">待办人</label>
            <div class="layui-input-inline">
                <input type="text" name="auditUser" placeholder="你要查哪个人的待办就输入哪个" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <button id="query" type="button" class="layui-btn">查询</button>
            </div>
        </div>
        <div style="padding: 0 30px;">
            <table class="layui-hide" id="demo" lay-filter="test"></table>
        </div>
    </div>
    
    <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 src="./layui/layui.js"></script>
    <script>
        var cData = {};
        layui.use(['table','jquery','layer'], function(){
            var table = layui.table
                ,layer = layui.layer
                ,$ = layui.jquery
            //展示已知数据
            table.render({
                elem: '#demo',
                id:'demo'
                ,cols: [[ //标题栏
                    {field: 'id', title: 'ID', width: 80, sort: true}
                    ,{field: 'candidateName', title: '用户名', width: 120}
                    ,{field: 'candidateEmail', title: '邮箱', minWidth: 150}
                    ,{field: 'sign', title: '签名', minWidth: 160}
                    ,{field: 'sex', title: '性别', width: 80}
                    ,{field: 'city', title: '城市', width: 100}
                    ,{field: 'experience', title: '积分', width: 80, sort: true}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                ]]
                ,data:[]
            });
            //工具栏事件
            table.on('tool(test)', function(obj){
                switch(obj.event){
                    case 'edit':
                        cData = obj.data;
                        layer.open({
                            title: '修改表单',
                            type: 2,
                            area: ['1051px', '591px'],
                            fixed: false, //不固定
                            maxmin: true,
                            content: "resubmit.html"
                        });
    
                        break;
                    case 'del':
                        layer.msg('删掉了：'+ JSON.stringify(obj.data));
                        break;
                };
            });
            
            var data = [{
                "id": "10001"
                ,"candidateName": "杜甫"
                ,"candidateEmail": "test@candidateEmail.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "人生恰似一场修行"
                ,"experience": "116"
                ,"ip": "192.168.0.8"
                ,"logins": "108"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10002"
                ,"candidateName": "李白"
                ,"candidateEmail": "test@candidateEmail.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "人生恰似一场修行"
                ,"experience": "12"
                ,"ip": "192.168.0.8"
                ,"logins": "106"
                ,"joinTime": "2016-10-14"
                ,"LAY_CHECKED": true
            }, {
                "id": "10003"
                ,"candidateName": "王勃"
                ,"candidateEmail": "test@candidateEmail.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "人生恰似一场修行"
                ,"experience": "65"
                ,"ip": "192.168.0.8"
                ,"logins": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10004"
                ,"candidateName": "贤心"
                ,"candidateEmail": "test@candidateEmail.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "人生恰似一场修行"
                ,"experience": "666"
                ,"ip": "192.168.0.8"
                ,"logins": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10005"
                ,"candidateName": "贤心"
                ,"candidateEmail": "test@candidateEmail.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "人生恰似一场修行"
                ,"experience": "86"
                ,"ip": "192.168.0.8"
                ,"logins": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10006"
                ,"candidateName": "贤心"
                ,"candidateEmail": "test@candidateEmail.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "人生恰似一场修行"
                ,"experience": "12"
                ,"ip": "192.168.0.8"
                ,"logins": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10007"
                ,"candidateName": "贤心"
                ,"candidateEmail": "test@candidateEmail.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "人生恰似一场修行"
                ,"experience": "16"
                ,"ip": "192.168.0.8"
                ,"logins": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10008"
                ,"candidateName": "贤心"
                ,"candidateEmail": "test@candidateEmail.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "人生恰似一场修行"
                ,"experience": "106"
                ,"ip": "192.168.0.8"
                ,"logins": "106"
                ,"joinTime": "2016-10-14"
            }];
            
            $("#query").click(function () {
                table.reload('demo', {
                    data:data
                })
            });
        });
    </script>
    </body>
    </html>

## viewed.html ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>查看已办</title>
        <link rel="stylesheet" href="./layui/css/layui.css">
        <style>
            .layui-form-mid {
                padding: 0 0!important;
            }
            .layui-form-item .layui-input-inline {
                width: 400px;
            }
        </style>
    </head>
    <body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>查看已办演示</legend>
    </fieldset>
    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">待办人</label>
            <div class="layui-input-inline">
                <input type="text" name="auditUser" placeholder="你要查哪个人的待办就输入哪个" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <button id="query" type="button" class="layui-btn">查询</button>
            </div>
        </div>
        <div style="padding: 0 30px;">
            <table class="layui-hide" id="demo"></table>
        </div>
    </div>
    
    <script src="./layui/layui.js"></script>
    <script>
        layui.use(['table','jquery','layer'], function(){
            var table = layui.table
                ,layer = layui.layer
                ,$ = layui.jquery
            //展示已知数据
            table.render({
                elem: '#demo',
                id:'demo'
                ,cols: [[ //标题栏
                    {field: 'id', title: 'ID', width: 80, sort: true}
                    ,{field: 'username', title: '用户名', width: 120}
                    ,{field: 'email', title: '邮箱', minWidth: 150}
                    ,{field: 'sign', title: '签名', minWidth: 160}
                    ,{field: 'sex', title: '性别', width: 80}
                    ,{field: 'city', title: '城市', width: 100}
                    ,{field: 'experience', title: '积分', width: 80, sort: true}
                ]]
                ,data:[]
            });
    
            var data = [{
                "id": "10001"
                ,"username": "杜甫"
                ,"email": "test@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "人生恰似一场修行"
                ,"experience": "116"
                ,"ip": "192.168.0.8"
                ,"logins": "108"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10002"
                ,"username": "李白"
                ,"email": "test@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "人生恰似一场修行"
                ,"experience": "12"
                ,"ip": "192.168.0.8"
                ,"logins": "106"
                ,"joinTime": "2016-10-14"
                ,"LAY_CHECKED": true
            }, {
                "id": "10003"
                ,"username": "王勃"
                ,"email": "test@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "人生恰似一场修行"
                ,"experience": "65"
                ,"ip": "192.168.0.8"
                ,"logins": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10004"
                ,"username": "贤心"
                ,"email": "test@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "人生恰似一场修行"
                ,"experience": "666"
                ,"ip": "192.168.0.8"
                ,"logins": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10005"
                ,"username": "贤心"
                ,"email": "test@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "人生恰似一场修行"
                ,"experience": "86"
                ,"ip": "192.168.0.8"
                ,"logins": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10006"
                ,"username": "贤心"
                ,"email": "test@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "人生恰似一场修行"
                ,"experience": "12"
                ,"ip": "192.168.0.8"
                ,"logins": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10007"
                ,"username": "贤心"
                ,"email": "test@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "人生恰似一场修行"
                ,"experience": "16"
                ,"ip": "192.168.0.8"
                ,"logins": "106"
                ,"joinTime": "2016-10-14"
            }, {
                "id": "10008"
                ,"username": "贤心"
                ,"email": "test@email.com"
                ,"sex": "男"
                ,"city": "浙江杭州"
                ,"sign": "人生恰似一场修行"
                ,"experience": "106"
                ,"ip": "192.168.0.8"
                ,"logins": "106"
                ,"joinTime": "2016-10-14"
            }];
    
            $("#query").click(function () {
                table.reload('demo', {
                    data:data
                })
            });
        });
    </script>
    </body>
    </html>

## trace.html ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>流程跟踪</title>
        <link rel="stylesheet" href="./layui/css/layui.css">
    </head>
    <body>
    
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>流程跟踪</legend>
    </fieldset>
    
    <ul class="layui-timeline" style="padding-left: 25px;">
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">8月18日</h3>
                <p>
                    layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
                    <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
                </p>
            </div>
        </li>
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis" style="color: red"></i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">8月16日</h3>
                <p>杜甫的思想核心是儒家的仁政思想，他有<em>“致君尧舜上，再使风俗淳”</em>的宏伟抱负。个人最爱的名篇有：</p>
            </div>
        </li>
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">8月15日</h3>
                <p>
                    中国人民抗日战争胜利日
                    <br>铭记、感恩
                </p>
            </div>
        </li>
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
                <div class="layui-timeline-title">过去</div>
            </div>
        </li>
    </ul>
    <script src="./layui/layui.js"></script>
    <script>
        layui.use(['form', 'layer'], function() {
            var form = layui.form
                , layer = layui.layer;
        })
    </script>
    </body>
    </html>