layui + layer弹出层增删改的操作

一、弹出层说明

  /*  ========== 弹出层说明 ==============*/function useradd() {                          // useradd()，点击事件//var pageNum = $('.uid').val();layui.use('layer', function () {layer.open({                          //  打开弹出层type: 2,                          //  2 - urlcontent: ["/user/user_add"],      //  弹出层的 url []不出现滚动,'noarea: ["600px", "400px"],         //  大小title: ['用户添加'],              //  定义弹出层名称  'font-size:13px;margin-top:10px;'fixed: false,                     //  鼠标滚动时，层是否固定在可视区域//maxmin: true,                   //  最大小化按钮shadeClose: true,btn: ['添加', '取消'],                  //按钮，可定义多个，btn2，btn3....获取回调，第一个按钮为 yes 获取回调yes: function (index, layero) {         //请求回调，按钮【添加】的回调var iframeWin = window[layero.find('iframe')[0]['name']];   //当前页获得 iframe页的窗口对象，执行iframe页的方法：iframeWin.userlayuiadd();           //调用子页面的方法，得到子页面返回的值//layer.msg('添加成功');layer.close(index);                 //关闭窗口（需要手动）}, btn2: function (index, layero) {     //请求回调，按钮【取消】的回调  return false 开启该代码可禁止点击该按钮关闭}, cancel: function () {                //请求回调，右上角关闭执行 return false 开启该代码可禁止点击该按钮关闭}, success: function (layero, index) {  //请求回调，打开窗口时执行}, end: function () {                   //请求回调，窗口销毁时执行//window.location.href='/user/pageAll';location.reload();                  //窗口销毁时刷新主页面数据}})})}

二、1.添加弹出层（父）

添加按钮，定义在右上
<div style="text-align:right;width:96.8%;"><!--background:--><div class="layui-form-item"><a><!--th:href="@{/user/user_add}"--><button id="add" onclick="useradd()" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">&#xe654;</i></button></a></div>
</div>
<-- layui -js  引自己的 -->
<script type="text/javascript" src="../frame/layui/layui.js"></script><script type="text/javascript">/*  ========== 添加弹出层父页面  button 事件 ==============*/function useradd() {layui.use('layer', function () {layer.open({type: 2,content: ["/user/user_add"],   //添加页，后台controller转发到指定页area: ["600px", "400px"],title: ['用户添加'],fixed: false,//maxmin: true,shadeClose: true,end: function () {  //刷新页面location.reload();}})})}</script>

二、2.添加弹出层（子表单）

使用 ajax 提交表单方便获取成功失败消息

======================添加页，弹出层的子页面======================<form id="popupForm" class="layui-form layui-form-pane" action="/user/save" method="post"><-- 表单内容省略 --><div style="text-align:right;width:1%;"><!--background:--><button lay-filter="userAdd" class="layui-btn layui-btn-primary"  lay-submit="">提交</button></div>
</form><-- layui -js  引自己的   jquery.js  随意引哪里的 -->
<script src="../frame/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="../frame/layui/jquery.min.js"></script><script>layui.use(['form', 'layedit', 'laydate'], function(){var form = layui.form,layer = layui.layer,layedit = layui.layedit,laydate = layui.laydate;//监听submit提交按钮 button ，lay-filter 为 userAdd 的form.on('submit(userAdd)', function(data){//此段代码可以获取提交的数据/* layer.alert(JSON.stringify(data.field), {title: '最终的提交信息'})*///ajax 提交$.ajax({type: "POST",dataType: "text",url: "/user/save" ,//urldata: $('#popupForm').serialize(),  //表单数据success: function (result) {if (result = "seccess") {layer.msg('添加成功，1秒后自动关闭该窗口');//延迟1秒执行，目的是让用户看到提示setTimeout( function(){//1、先得到当前iframe层（弹出层）的索引  ///2、提交成功关闭弹出层窗口var index = parent.layer.getFrameIndex(window.name);parent.layer.close(index);}, 1 * 1000 );};},error : function() {layer.msg('后台异常！未添加成功');}});//阻止页面跳转return false;});//自定义表单验证//lay-verify ：对应userr、pass、等，required 为必填项form.verify({user: function(value){if(value.length < 2){return '用户名至少得2个字符啊';}},pass: [/^[\S]{6,12}$/,'密码必须6到12位，且不能出现空格'],content: function(value){layedit.sync(editIndex);}});});
</script>

三、1.修改弹出层（父）

1、使用 ajax 提交表单方便获取成功失败消息

2、修改url 需要 Id ，从后台查询数据回显到添加页，
如：th:value="${user.username}"

3、th:οnclick="|user_update(’${u.userId}’)|"
此为 thymeleaf 模版的点击事件传值


按钮事件
<button class="layui-btn layui-btn-primary layui-btn-sm" th:onclick="|user_update('${u.userId}')|">修改</button>
<button class="layui-btn layui-btn-primary layui-btn-sm" th:onclick="|user_delete('${u.userId}')|">删除</button>/*  ========== 修改弹出层 =========user_update=====*/function user_update(id) {layui.use('layer', function () {layer.open({type: 2,content: ["/user/updateId?id="+id],area: ["600px", "400px"],title: ['用户修改'],fixed: false,//maxmin: true,shadeClose: true,end: function () {location.reload();}})})}

三、2.修改弹出层（子）

<form id="popupForm" class="layui-form layui-form-pane" action="/user/save" method="post"><input type="hidden" th:value="${user.userId}" name="userId"><div style="text-align:right;width:1%;"><!--background:--><button lay-filter="userUpdate"  class="layui-btn layui-btn-primary"  lay-submit="">提交</button></div>
</form>jquery + layui  js，自己引
<script src="../frame/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="../frame/layui/jquery.min.js"></script><script>layui.use(['form', 'layedit', 'laydate'], function(){var form = layui.form,layer = layui.layer,layedit = layui.layedit,laydate = layui.laydate;//监听submit提交按钮 button ，lay-filter 为 【userUpdate】 的form.on('submit(userUpdate)', function(data){//此段代码可以获取提交的数据/* layer.alert(JSON.stringify(data.field), {title: '最终的提交信息'})*///ajax 提交$.ajax({type: "POST",dataType: "text",url: "/user/save" ,//urldata: $('#popupForm').serialize(),  //表单数据success: function (result) {if (result = "seccess") {layer.msg('修改成功，1秒后自动关闭该窗口');//延迟1秒执行，目的是让用户看到提示setTimeout( function(){//1、先得到当前iframe层（弹出层）的索引  ///2、提交成功关闭弹出层窗口var index = parent.layer.getFrameIndex(window.name);parent.layer.close(index);}, 1 * 1000 );};},error : function() {layer.msg('后台异常！未添加成功');}});//阻止页面跳转return false;});//自定义表单验证//lay-verify ：对应userr、pass、等，required 为必填项form.verify({user: function(value){if(value.length < 2){return '用户名至少得2个字符啊';}},pass: [/^[\S]{6,12}$/,'密码必须6到12位，且不能出现空格'],content: function(value){layedit.sync(editIndex);}});});
</script>

四、删除弹出层（父）

此方法使用的url ，不安全，后台需要重定向，或者自己写ajax，
不过执行完删除的 ajax 后主页面刷新就自己想办法处理了，可以调用window.location.href 到主页的url

mvc重定向 : redirect ----- 如： redirect:/user/pageAll 重定向到查询数据的方法

 <button class="layui-btn layui-btn-primary layui-btn-sm" th:onclick="|user_delete('${u.userId}')|">删除</button>/*  ========== 删除提示弹出层 ==============*/function user_delete(id) {layui.use('layer', function () {layer.msg('你确定要删除么？', {time: 0 //不自动关闭,btn: ['必须删', '不删了'],yes: function(index){window.location.href='/user/deleteId?id='+id;layer.close(index);layer.msg('删除成功', { icon: 6 });}});})}//  id 删除数据@GetMapping("/deleteId")public String deleteUserId(Long id) {userService.deleteId(id);return "redirect:/user/pageAll";}

表单验证默认提供

layui + layer弹出层增删改的操作相关推荐

php layer弹出层更改背景,layui.layer 弹出层背景透明，前景无阴影实现方案
先上具体实现方法. 首先,在 css 里给 layer 弹出层写个自定义 skin (这点不明白的同学请出门左转 layui 官网文档):.myskin{ background-colo ...
layui layer弹出层通过offset属性定位弹出层在光标处弹出(event.clientY和event.clientX)失败。
将弹出层弹出位置定位到光标处,大小超过父弹出层的部分无法显示 .js //页面层-自定义 $("#more").click(function (event) {layer.open ...
前端ui框架layui——layer弹出层-弹出框方法
----------弹出框方法----------------- 1.layer.open(options) - 原始核心方法基本上是露脸率最高的方法,不管是使用哪种方式创建层,都是走layer.o ...
前端ui框架layui——layer弹出层-内置方法
提示:本页内容所展示的内置方法是除了所有弹出方法(eg:layer.open)以外的,想看弹出方法请到这里 --------内置方法---------- 1.layer.config(options) ...
layui.layer 弹出层使用
layer 在 layui 体系中的位置比较特殊,甚至让很多人都误以为 layui = layer ui,所以再次强调 layer 只是作为 layui 的一个弹层模块 1. 获取laery,你需要去 ...
在layui layer 弹出层中加载 layui table
1 layui.use('table', function(){ 2 var table = layui.table; 3 layer.open({ 4 type : 1, 5 area : [ &q ...
layui内置模块（layer弹出层）
前面我们已经对layui前端框架的页面元素进行了简单的学习,但是作为一个可用的程序,仅仅是长的好看,并没有那个什么用:在好看的同时还需要实用和酷炫,实用就需要实现我们方便的和后端进行数据交互,酷炫就是 ...
layui弹出层闪退，layer弹出层闪退，layer弹出层坑
这两天用layui的弹出层插件,发现两奇怪的问题: 1.弹窗打开事件还未绑定到任何按钮,可是点击form表单中的按钮可以打开我定义的弹出层 2.绑定弹出层到按钮,打开弹窗闪退后面发现真如参考博文所说 ...
layui弹出层html,layer弹出层
layer 弹出层,怎么只让他弹出一次.在线等我昨天用这个插件的时候也有这个问题,弹出内容大了就居不了中.这是组件不完美的地方,他设置了top和left值,而且是固定的.这种弹出层都是绝对定位的所 ...