当前位置：首页 > news >正文

Layer、LayUI

news 2025/9/15 12:38:54

一、Layer

Layer（弹窗组件）
定位：独立的 Web 弹窗组件，是 LayUI 的 “核心成员”，也可单独使用。
特点：
支持多种弹窗类型（信息提示、页面层、iframe 层、加载层等）。
样式美观，交互流畅，兼容主流浏览器。
用法简单，参数配置灵活。
关系：Layer 最初是 LayUI 的内置组件，后来被分离为独立库，可单独引入到任何项目中（不依赖 LayUI）。

封装自己的Layer
为什么要封装自己的layer库
1、方便 2、减少重复代码

什么时候使用弹窗（使用场景）
1、正确提示msg
2、错误提示msg
3、警告提示alert
4、确实提示confirm
在这里插入图片描述

二、LayUI

LayUI（前端 UI 框架）
定位：经典的前端 UI 框架，由国人开发，主打 “极简模块化”，适合快速构建后台管理系统、企业级 Web 界面。
特点：
基于 jQuery，提供了丰富的 UI 组件（表格、表单、弹窗、导航等），开箱即用。
文档简洁，中文支持友好，学习成本低。
内置模块化加载机制，无需复杂配置。
在这里插入图片描述

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title><link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body><table class="layui-hide" id="tableId" lay-filter="tableId"></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="deleteAll">批量删除</button></div></script><script type="text/html" id="toolDemo"><div class="layui-clear-space"><a class="layui-btn layui-btn-xs" lay-event="update">编辑</a><a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="deleteById">删除</a></div></script><script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script><script src="/static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script><%--自己写的一个layer库--%><script src="/static/mylayer.js" type="text/javascript" charset="utf-8"></script><script>//layui对象已在layui.js中定义完成//拿到layui中的table模块layui.use(['table'],function () {var table = layui.table;// 创建渲染实例//render：渲染table.render({//为js对象，因为key没有引号//id找到对应的tableelem: '#tableId',//url拿到后台数据url: '/banji?method=selectByPage',//头部工具条toolbar: '#toolbarDemo',//每一个单元格最小宽度cellMinWidth: 80,//开启分页page: true,cols: [[//左边生成一个复选框//fixed: 'left'：冻结单元格在左边不动（不受进度条影响）{type: 'checkbox', fixed: 'left'},//拿到后台数据中的字段值（id、username）{field:'id', fixed: 'left', title: 'ID', sort: true},{field:'name', title: '班级名字'},{field:'address', title: '班级地址'},{fixed: 'right', title:'操作', width: 134, minWidth: 125, templet: '#toolDemo'}]],});// 工具栏事件table.on('toolbar(tableId)', function(obj){var id = obj.config.id;var checkStatus = table.checkStatus(id);var othis = lay(this);switch(obj.event){case 'add'://open为万能弹窗layer.open({type:2,title: '添加数据',//弹出框的大小area: ['90%','90%'],//弹出一个页面content: '/banji_add.jsp'})break;case 'deleteAll':var data = checkStatus.data;//[{"id":1,"name":"java1807","address":"教学楼"},{"id":2,"name":"java1821","address":"行政楼"}]console.log(data);//保存每个对象的id，拿到每一个id去删除var ids = new Array();$(data).each(function () {//this:[{"id":1,"name":"java1807","address":"教学楼"},{"id":2,"name":"java1821","address":"行政楼"}]ids.push(this.id);})layer.confirm('您确定要删除吗',function () {$.post('/banji?method=deleteAll',{'ids': ids},function (result) {console.log(result);if (result.code == 0){//弹出窗口mylayer.okMsg(result.msg);//删除之后刷新表格，展示最新的数据//之前需要重定向，现在用特定方法直接更新表格，页面不变table.reload('tableId');}},'json')})break;};});// 触发单元格工具事件table.on('tool(tableId)', function(obj){ // 双击 toolDoublevar data = obj.data; // 获得当前行数据console.log(data)if(obj.event === 'update'){layer.open({title: '编辑',type: 2,area: ['80%','30%'],//用ajax请求可以直接到这个页面content: '/banji_update.jsp?id=' + data.id});} else if(obj.event === 'deleteById'){layer.confirm('您确定要删除吗',function () {$.post('/banji?method=deleteById',{'id': data.id},function (result) {console.log(result);if (result.code == 0){//弹出窗口mylayer.okMsg(result.msg);//删除之后刷新表格，展示最新的数据//之前需要重定向，现在用特定方法直接更新表格，页面不变table.reload('tableId');}},'json')})};});});</script>
</body>
</html>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title><link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body><form class="layui-form" action=""><div class="layui-form-item"><label class="layui-form-label">班级名</label><div class="layui-input-block"><input type="text" name="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="address" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><div class="layui-input-block"><button type="submit" class="layui-btn" lay-submit lay-filter="formFilter">添加</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form><script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script><script src="/static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script><%--自己写的一个layer库--%><script src="/static/mylayer.js" type="text/javascript" charset="utf-8"></script><%--不用form表单中的action属性去提交请求，避免了转发与重定向用layui中特有的方式发送ajax请求--%><script>layui.use(['form'],function () {var form = layui.form;// 提交事件form.on('submit(formFilter)', function(data){var field = data.field; // 获取表单字段值//{name: 'Java班级', address: '信息楼'}console.log(field);// 此处可执行 Ajax 等操作//其实大多数为固定的格式$.post('/banji?method=add',field,function (result) {console.log(result);if (result.code == 0){//弹出窗口mylayer.okMsg(result.msg);//延时2s后关闭弹窗，否则连添加成功的弹窗都没看清就关掉了setInterval(function () {//每个弹窗都有一个index返回值，可以根据这个值来关闭弹窗var index = parent.layer.getFrameIndex(window.name);parent.layer.close(index);//删除之后刷新表格，展示最新的数据//table.reload('tableId');//认识就可以，不用背下来parent.layui.table.reload('tableId');}, 2000)}},'json');return false; // 阻止默认 form 跳转});})</script>
</body>
</html>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title><link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body><form class="layui-form" lay-filter="formFilter" action=""><input type="hidden" name="id"><div class="layui-form-item"><label class="layui-form-label">班级名</label><div class="layui-input-block"><input type="text" name="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="address" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><div class="layui-input-block"><button type="submit" class="layui-btn" lay-submit lay-filter="formFilter">编辑</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form><script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script><script src="/static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script><%--自己写的一个layer库--%><script src="/static/mylayer.js" type="text/javascript" charset="utf-8"></script><%--不用form表单中的action属性去提交请求，避免了转发与重定向用layui中特有的方式发送ajax请求--%><script>layui.use(['form'],function () {var form = layui.form;//下面一段为固定代码拿到idvar queryString = window.location.search;//打印信息为 queryString: ?id=1console.log('queryString: ' + queryString);var urlParams = new URLSearchParams(queryString);var id = urlParams.get("id");console.log("id: " + id);//发送ajax请求获取数据$.post(//向后台获取数据'/banji?method=selectById',{'id': id},//result为传回来的数据function (result) {console.log(result);if (result.code == 0) {//$('input[name="id"]').val(result.data.id);//$('input[name="name"]').val(result.data.name);//$('input[name="address"]').val(result.data.address);//为form标签中的formFilter，换成别的名字也可以form.val('formFilter', result.data);}},//期望后台传给前台的数据类型'json')// 提交事件form.on('submit(formFilter)', function(data){var field = data.field; // 获取表单字段值//{name: 'Java班级', address: '信息楼'}console.log(field);// 此处可执行 Ajax 等操作//其实大多数为固定的格式$.post('/banji?method=update',field,function (result) {console.log(result);if (result.code == 0){//弹出窗口mylayer.okMsg(result.msg);//延时2s后关闭弹窗，否则连添加成功的弹窗都没看清就关掉了setInterval(function () {//每个弹窗都有一个index返回值，可以根据这个值来关闭弹窗var index = parent.layer.getFrameIndex(window.name);parent.layer.close(index);//删除之后刷新表格，展示最新的数据//table.reload('tableId');//认识就可以，不用背下来parent.layui.table.reload('tableId');}, 2000)}},'json');return false; // 阻止默认 form 跳转});})</script>
</body>
</html>