Layui网页模板

最新推荐文章于 2024-05-18 09:37:38 发布
最新推荐文章于 2024-05-18 09:37:38 发布
阅读量1.4k 收藏 1
点赞数 1
分类专栏： SpringMVC 文章标签： layui javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53374893/article/details/132004239
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员管理</title>
    <link href="layui/css/layui.css" rel="stylesheet">
    <script src="layui/layui.js"></script>
</head>
<body>
    <div class="layui-container">
        <!-- 添加表单 -->
        <form class="layui-form" id="addMember" lay-filter="addMember" action="" style="display: none; padding-right:20px;">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" lay-reqtext="姓名不能为空" 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="phone" lay-verify="required" lay-reqtext="电话不能为空" 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="regDate" class="layui-input" id="mydate_add">
                </div>
            </div>
            <!-- 单选按钮 -->
            <div class="layui-form-item">
                <label class="layui-form-label">会员类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="type" value="vip" title="VIP" checked>
                    <input type="radio" name="type" value="normal" title="普通">
                </div>
            </div>            
        </form>
        <!-- 详情表单 -->
        <form class="layui-form" id="detailMember" lay-filter="detailMember" action="" style="display: none; padding-right:20px;">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" class="layui-input" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" class="layui-input" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">注册日期</label>
                <div class="layui-input-block">
                    <input type="text" name="regDate" class="layui-input" id="mydate_detail" disabled>
                </div>
            </div>
            <!-- 单选按钮 -->
            <div class="layui-form-item">
                <label class="layui-form-label">会员类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="type" value="vip" title="VIP" checked disabled>
                    <input type="radio" name="type" value="normal" title="普通" disabled>
                </div>
            </div>        
        </form>
         <!-- 编辑表单 -->
         <form class="layui-form" id="editMember" lay-filter="editMember" action="" style="display: none; padding-right:20px;">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" lay-reqtext="姓名不能为空" 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="phone" lay-verify="required" lay-reqtext="电话不能为空" 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="regDate" class="layui-input" id="mydate_edit">
                </div>
            </div>
            <!-- 单选按钮 -->
            <div class="layui-form-item">
                <label class="layui-form-label">会员类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="type" value="vip" title="VIP" checked>
                    <input type="radio" name="type" value="normal" title="普通">
                </div>
            </div>        
        </form>
       
        <div class="layui-row layui-col-space16">
            <div class="layui-col-md12">
                <button class="layui-btn layui-btn-info" style="margin-top: 20px;" id="btnAdd">
                    <i class="layui-icon layui-icon-addition"></i>
                    添加新会员
                </button>
                <table lay-filter="member_list" class="layui-table" id="mytable"></table>
            </div>
        </div>
    </div> 
    <script>
        layui.use(["table","form","layer","laydate"],function(){
            var $ = layui.$;
            var table = layui.table; 
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            //加载日期
            laydate.render({
                elem:"#mydate_add",
                value:new Date(),
                type:"date",
                format:"yyyy-MM-dd"
            });
            laydate.render({
                elem:"#mydate_detail",
                value:new Date(),
                type:"date",
                format:"yyyy-MM-dd"
            });
            laydate.render({
                elem:"#mydate_edit",
                value:new Date(),
                type:"date",
                format:"yyyy-MM-dd"
            });

            //渲染表格数据
            var inst = table.render({
                elem:"#mytable",
                url:'Member?method=findByPage',//此处需要指定后台数据接口地址
                cols:[[
                    {field: 'id', title: 'ID',  sort: true},
                    {field: 'name', title: '姓名'},
                    {field: 'phone', title: '电话'},
                    {field: 'type', title: '会员类型'},
                    {field: 'regDate', title: '注册时间'},
                    {field: 'right', title: '操作',toolbar:"#template",align:"center",width:180}
                ]],
                page:{
                    layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
                    limit:3,
                    limits:[3,6]
                },
                request:{
                    pageName:'currentPage',
                    limitName: 'pageSize'
                },
            });

            //刷新表格
            function refreshTb() {
                table.reload("mytable", {
                    cols: [[
                        { field: 'id', title: 'ID', sort: true },
                        { field: 'name', title: '姓名' },
                        { field: 'phone', title: '电话' },
                        { field: 'type', title: '会员类型' },
                        { field: 'regDate', title: '注册时间' },
                        { field: 'right', title: '操作', toolbar: "#template", align: "center", width: 180 }
                    ]],
                    page: {
                        layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
                        limit: 3,
                        limits: [3, 6]
                    }
                })
            }
            //添加按钮单击事件
            $("#btnAdd").click(function(){
                //打开弹出层完成添加操作
                $("#addMember")[0].reset();
                form.render();
                layer.open({
                    type: 1,
                    title: ['添加新会员','font-size:18px;font-weight:bold;'],
                    area:["700px","300px"],
                    content:$("#addMember"),
                    btn:["确定","取消"],
                    closeBtn:0,
                    scrollbar: true,
                    btnAlign:"c",
                    //将普通按钮设置为提交按钮
                    success:function (layero,index){
                        layero.addClass('layui-form');
                        layero.find('.layui-layer-btn0').attr({
                            'lay-filter':"addbtn",
                            'lay-submit':''
                        });
                    },
                    //确定按钮提交表单
                    yes:function(index){
                        form.on("submit(addbtn)",function (){
                            //获取表单数据，参数是lay-filter，请求服务器完成添加
                           var data=form.val("addMember");
                            $.post("Member?method=add",data,function (obj){
                                if (obj.code>0){
                                    layer.msg(obj.msg,{icon:1});
                                }else{
                                    layer.msg(obj.msg,{icon:2});
                                }
                               layer.close(index);
                                refreshTb();
                            },"json");
                        })
                    },
                    cancle:function(){
                        layer.close();
                    }
                });
            });

            //工具条事件
            //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            table.on('tool(member_list)', function (obj) {
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

                if (layEvent === 'details') { //查看
                    //回显会员数据
                 form.val("detailMember",data);
                    layer.open({
                        type: 1,
                        title: ['会员详情','font-size:18px;font-weight:bold;'],
                        area:["700px","300px"],
                        content:$("#detailMember"),
                        btn:["取消"],
                        closeBtn:0,
                        btnAlign:"c",
                        cancle:function(){
                            layer.close();
                        }
                    });
                } else if (layEvent === 'del') { //删除
                    layer.confirm('确定要删除吗', function (index) {
                        //向服务端发送删除指令
                        $.get("Member?method=delete&id="+data.id,function (obj){
                            if (obj.code>0){
                                layer.msg(obj.msg,{icon:1});
                            }else{
                                layer.msg(obj.msg,{icon:2});
                            }

                            refreshTb();
                        },"json")

                    });
                } else if (layEvent === 'edit') { //编辑
                    //回显示数据
                    form.val("editMember",data);
                    layer.open({
                        type: 1,
                        title: ['修改会员信息', 'font-size:18px;font-weight:bold;'],
                        area: ["700px", "300px"],
                        content: $("#editMember"),
                        btn: ["确定", "取消"],
                        closeBtn: 0,
                        scrollbar: true,
                        btnAlign: "c",
                        //将普通按钮设置为提交按钮
                        success:function (layero,index){
                            layero.addClass('layui-form');
                            layero.find('.layui-layer-btn0').attr({
                                'lay-filter':"editbtn",
                                'lay-submit':''
                            });
                        },
                        yes: function (index) {
                            form.on("submit(editbtn)",function (){
                                //获取表单数据，参数是lay-filter，请求服务器完成修改
                             let update= form.val("editMember");
                             update.id=data.id;
                                console.log(update);
                                $.post("Member?method=update",update,function (obj){
                                    if (obj.code>0){
                                        layer.msg(obj.msg,{icon:1});
                                    }else{
                                        layer.msg(obj.msg,{icon:2});
                                    }
                                    layer.close(index);
                                    refreshTb();
                                },"json")


                            });
                        },
                        cancle: function () {
                            layer.close();
                        }
                    });
                }
            });
        })
    </script>
    <script type="text/html" id="template">
        <button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
        <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="details">详情>></button>
    </script>
</body>
</html>
荭色海湾
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
简单layui后台框架页面模板
06-01
简单通用的layui后台页面模板。主要是导航的样式 以及菜单缩进，自适应手机端处理。
layuiAdmin经典模板
03-11
iframe 1.0 版本的 模板， 是 layui 官方出品的通用后台模板解决方案,目前分为“iframe版”和“单页面应用版”两个版本
推荐开源项目：LayuiCMS —— 美观且强大的响应式前端模板
最新发布
gitblog_00007的博客
05-18 460
推荐开源项目：LayuiCMS —— 美观且强大的响应式前端模板 项目地址:https://gitcode.com/horsecms/layuicms2.0 项目介绍 LayuiCMS是一个基于layui2.x的响应式前端模板，专为构建企业级管理系统而设计。它拥有丰富的界面元素和多样化的布局，旨在简化Web应用的开发过程。项目注重用户体验，提供了一系列优雅的页面示例，包括但不限于首页、个人资料、文...
Lay-UI前端模板
07-01
layui 是一款采用自身模块规范编写的前端 UI框架,遵循原生 HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,
LayUI简单页面模板.zip
10-19
该模板适用于Java后端开发的管理系统简单模板（包括简单的登录页面，添加页面，修改页面.......）
Layui母婴商店模版
chnagxu的博客
11-08 173
母婴商城模板登录页面购物车页面。
【Flask-Web】基于layui前端模板搭建简易管理系统
liudongdong_jlu
01-02 1448
研究生阶段数据处理AI训练基本都用的Python语言，UI方面使用类似桌面编程PyQT，考虑平台原因，后来学习基于Web的Flask框架，配合前端UI库可以快速搭建Web 应用，展示AI后台处理结果，整理当初的学习记录（后来知道使用网络中间件跨平台组件开发通信，Fastjson或者Google Protobuf进行序列化处理）。
layui源码详细分析系列之模板引擎
玉案轩窗的博客
08-08 6656
前言所谓的模板引擎，其实最早接触该形式的应该是jsp，在html代码中嵌套java代码，使用形式与模板很相似，实际上jsp就是一种模板语言，对于模板语言我的了解并不多，此处就不再详细的描述了。当我看见layui内置的模板引擎模块laytpl.js时，我首先想起的是Vue中{{}}模板的使用，但是Vue中还有双向绑定的概念（你可已使用get/set方法来实现），laytpl.js中提供的模板类型有两种
Layui布局页面设计:
henrenzhenderen的博客
09-23 1583
1、layui简介： 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式。主要面向的是全层次的前后端开发者，极易上手，开箱即用，非常适合网页界面的快速开发。(若依) 2、栅格系统： ...
layui经典布局
Fuyonghui123的博客
05-07 955
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./layui-v2.6.5/layui/css/layui.css"> <script src="./layui-v2.6.5/layui/layui.js"&...
Layui 2.9.2 列表商品展示页 用模板引擎 laytpl Ajax 读取json 数据 筛选数组 filter css 限制文体显示过长用。。。代替
PieroPc的博客
12-19 1084
【代码】Layui 2.9.2 列表商品展示页 用模板引擎 laytpl Ajax 读取json 数据 筛选数组 filter css 限制文体显示过长用。。。代替。
layuiAdmin后台模版
04-29
layuiAdmin 后台模版, 包括单页版 和 iframe版. 下载后参考文本说明使用. 仅供学习, 商用请购买正版.
基于layui后台html模板
07-31
基于layui后台html模板
基于layui后台html模板.zip
07-30
直接可以运行，几个后台模板供大家选择和学习，有代码注释
layer样式前端系统模板
10-25
layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验。
layui模板资源.rar
10-31
"layui模板资源.rar"这个压缩包中包含了两个后台管理系统模板和一个轮播图模板，是学习和开发项目的好材料。以下是对这些资源的详细解读： 1. layui框架介绍： layui是一个基于前端MVC模式的模块化开发框架，提供...
layui后台管理系统模板
06-17
layui后台管理系统模板是一款基于layui框架构建的高效、简洁的后台管理界面模版，它融合了现代网页设计趋势与后台管理功能需求，为开发者提供了便捷的开发工具。模板包含了丰富的页面元素和功能模块，旨在提高开发...
layui通用后台模板
峰少少博文
04-23 7088
layui官方文档 https://www.layui.com/doc/ 项目路径等，引用的js及css可参考 https://blog.csdn.net/t1012665655/article/details/88528182 工作之余，非前端专业人员，参考 最基本的访问路径controller @Controller @RequestMapping("/layui/panel") publ...
layUi框架入门篇（二）——布局
我是一只蘑菇17的博客
10-20 3116
layui文档layui文档
layui 前端模板
10-10
layui是一个非常受欢迎的前端模板，它提供了丰富的UI组件和常用的前端功能，方便开发者快速构建出漂亮的网页界面。 首先，layui拥有大量的UI组件，包括按钮、表单、表格、导航、面包屑等常见的界面元素。这些组件都经过精心设计，样式美观，交互友好，能够满足大多数网页的需求。同时，layui还提供了丰富的配色方案，可以根据项目需要进行自定义，使得网页在视觉上更加统一和专业。 其次，layui还提供了丰富的前端功能，例如表单验证、异步加载、图片预览等。表单验证功能方便开发者对用户输入进行校验，确保数据的合法性。异步加载功能可以提高网页的加载速度和用户体验，使得页面不需要重新加载就能够动态更新内容。图片预览功能可以方便地实现图片的放大、缩小和切换，提供更好的用户交互效果。 除此之外，layui还支持响应式布局，适应不同屏幕尺寸的设备。这意味着网页在不同的终端上都能够呈现出较好的效果，无论是在PC端还是移动端都能够提供良好的用户体验。这对于当前移动互联网的发展趋势来说，是非常重要的。 总的来说，layui是一个功能强大、易于使用的前端模板，它能够帮助开发者快速构建出漂亮、功能完善的网页界面。无论是初学者还是有一定经验的开发者，都可以通过layui来提高开发效率和网页质量。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值