layui之弹出层关闭和刷新问题
本篇文章是根据本人实际开发的例子来讲的,不一定适用各位看官的情况
描述:
主页面,弹出第一个弹框,第一个弹框中在弹出第二个弹框,如图:

1是主页面,2是子弹窗,3是孙弹窗
功能一:好了,第一个我要实现的功能是点击弹窗3的确定之后关闭弹窗3
上js代码,先贴出如何在主页面1中弹出弹窗2的代码:
//弹窗2(代码写在主页面1)
function edit() { var index = layer.open({//占坑!!!
type : 2,
title : "预算目标编辑",
content : "/xx/xx/xx/edit?year=" + year
+ "&departmentCode=" + departmentCode,
area : [ "90%", "90%" ],
}); }
接着贴出如何在弹窗2中弹出弹窗3的:
//弹窗3(js代码写在弹窗2中)
function configuration(){
parent.layer.open({//占坑!
type: 2,
title: "配置项目",
content: "/xx/xx/xx/xx?budgetMainCode="+budgetMainCode,
area: ["80%", "80%"],
end: function () {//点睛之笔,此端代码便是精髓之处,layui监听到弹窗3的销毁之后回调了一个end函数,通过这个end函数我们就能刷新弹窗2的数据
refreshTable()//就比如这refreshTable()是弹窗2里面的用于拼接数据列表的函数
} }); }
//确定(代码写在弹窗3中)
//弹窗3中的js代码,就是最上面那个图中的确定按钮的函数
function comfirm(){
//获取checkbox[name='check']的值
var arr = new Array();
$("input:checkbox[name='check']:checked").each(function(i){
arr[i] = $(this).val();
});
$.ajax({
type: "post",
dataType: 'json',
url: "/xx/xx/xx/checkChoise?budgetMainCode="+budgetMainCode,
contentType: 'application/json',
data: JSON.stringify(arr),
success: function (result) {//点击确定按钮之后,后台业务代码出来成功之后的回调
if (result.status == 0) {
parent.layer.close(parent.layer.index);//根据前面怎么弹出弹窗来选择索引去关闭弹窗,比如前面弹窗3是通过parent.layer.open弹出来的,
那么我就获取它的索引,并将它关闭,占坑!!!
}
if (result.message != null) {
layer.msg(result.message)
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
layer.msg('{"status":"' + XMLHttpRequest.status + '","readyState":"' + XMLHttpRequest.readyState + '","textStatus":"' + textStatus + '","errorThrown":"' + errorThrown + '"}')
}
})
}
功能二:
需求是点击弹窗3的某一条数据的“项目模板”然后选好该条模板在后台把这条模板插入到另外一个表里面
,这里面的另外一个表指的是弹窗2中的一个数据表格。弹窗2的数据表格在弹窗3关闭的瞬间然后插入一条新的数据,此时弹窗2的那个数据表格肯定要立马刷新
//弹窗3(js代码写在弹窗2中)
function configuration(){
parent.layer.open({//占坑!
type: 2,
title: "配置项目",
content: "/xx/xx/xx/xx?budgetMainCode="+budgetMainCode,
area: ["80%", "80%"],
end: function () {//点睛之笔,此端代码便是精髓之处,layui监听到弹窗3的销毁(窗口关闭)之后回调了一个end函数,通过这个end函数我们就能刷新弹窗2的数据
refreshTable()//就比如这refreshTable()是弹窗2里面的用于拼接数据列表的函数
} }); }
如图弹窗2:

确定之后选择了这条模板数据,同时关闭弹窗3,效果如图:

layui之弹出层关闭和刷新问题的更多相关文章
- Layer弹出层关闭后刷新父页面
API地址:http://layer.layui.com/api.html#end 调用END回调方法: end - 层销毁后触发的回调 类型:Function,默认:null 无论是确认还是取消,只 ...
- layui如何自定义弹出层关闭事件
在某些业务场景下,我们需要自定义弹出层关闭事件,代码示例如下: layui.use('layer', function () { var layer = layui.layer; layer.open ...
- layui如何隐藏弹出层关闭的按钮
layui默认弹出层是带有关闭按钮的,但是在某些场景我们不需要layui的关闭按钮,这时只需添加closeBtn :0即可 效果图如下: 示例代码如下: layui.use('layer', func ...
- layui(弹出层)
首先引入文件 layui.css jquery.min.js layui.js 弹出层 data-method 后面的属性控制是什么弹窗,在js中写方法 <div class="sit ...
- layui的弹出层的title的自定义html
layui的弹出层的title的自定义html //在这里面输入任何合法的js语句 layer.open({ type: 1 //Page层类型 ,area: ['500px', '300px' ...
- layui获取弹出层内容
一. 弹出层: <body class="childrenBody"> <form class="layui-form"> <di ...
- LayUI之弹出层
1.导入插件 layui使用需要导入layui的js和css: <link rel="stylesheet" href="layui/css/layui.css&q ...
- 关于弹出层(iframe)时刷新页面的js
[javascript] view plaincopyprint? iframe弹出子页面刷新父页面iframe parent.location.reload(); [javascript] view ...
- 在layui layer 弹出层中加载 layui table
layui.use('table', function(){ var table = layui.table; layer.open({ type : 1, area : [ "600px& ...
随机推荐
- Java-公约公倍
题目: 如果两个数很大,怎样求最大公约数,最小公倍数?如果是n个数呢?比如1000个数的最小公倍数 分析:求a和b的最大公约数——辗转相除法(又叫欧几里得定理).即找到一个数,能对a,b都除尽.对于这 ...
- JavaSE学习笔记(5)---内部类和String类
JavaSE学习笔记(5)---内部类和String类 一.内部类基础 转自菜鸟教程 在 Java 中,可以将一个类定义在另一个类里面或者一个方法里面,这样的类称为内部类.广泛意义上的内部类一般来 ...
- 通过编写Java代码让Jvm崩溃
在书上看到一个作者提出一个问题"怎样通过编写Java代码让Jvm崩溃",我看了之后也不懂.带着问题查了一下,百度知道里面有这样一个答案: 1 package jvm; 2 3 pu ...
- Java集合之Arrays 剖析
Arrays工具类位于 java.util 包下,是一个比较常用的工具类,其可以针对数组进行各种操作,比如赋值.排序.搜索等等.在项目过程中我们针对数组的有关操作,如果不方便直接操作,均可通过调用此类 ...
- Raspbain系统无屏幕无网线通过ssh远程连接树莓派设置wifi步骤
应该是最简单的步骤了,只需通过电脑.路由器.树莓派在同一个局域网即可,它们之间都是无线连接 1.首先通过路由器连接树莓派,查看树莓派的地址 然后我们依旧可以用网线,以及WIFI,连接树莓派,第一次连接 ...
- 如果linux开机没有ip怎么办
1.vim编辑网卡配置文件,修改如下参数 [root@s25linux tmp]# cd /etc/sysconfig/network-scripts/vim修改此文件,找到如下参数,改为yesONB ...
- Redis基础详解
1. Redis是什么.特点.优势 Redis是一个开源的使用C语言编写.开源.支持网络.可基于内存亦可持久化的日志型.高性能的Key-Value数据库,并提供多种语言的API. 它通常被称为 数据结 ...
- First Kernel-pwn
Kernel pwn-极简题目的操作模式 完全参照M4x师傅的指导,用 hacklu的baby kernel迈了第一步 题目附带文件说明 一般题目会给出bzImage,.cpio, .sh文件 sh文 ...
- react-native构建基本页面4---渲染电影列表
电影列表 import React, { Component } from 'react' import { View, Image, Text, ActivityIndicator, FlatLis ...
- cmdb实现三种方式
为什么要做CMDB? 1.实现运维自动化,CMDB是实现运维自动化的基石 2.之前做资产统计的时候,使用execl来统计,为了年底资产审计方便 3.运维日常工作繁琐, 4.运行环境不统一 Agent方 ...