Layui弹出层关闭后页面自动刷新的用法以及建议

首先在HTML中定义一个查询按钮

<div class="layui-inline"><button class="layui-btn" id="searchBtn" lay-submit lay-filter="data-search-btn" >    <i class="layui-icon layui-icon-search">查询</i></button>
</div>
 相应的查询方法定义:
//搜索
form.on('submit(data-search-btn)', function (data) {table.reload('currentTableId',{//重新加载tablewhere: data, //查询条件--也就是查询按钮的这个表单的所有子元素的值page: {curr: 1 //重新从第 1 页开始,如果当前是第10页,再次根据其他条件查询可能无法查询到第10页的数据,翻页时并不会触发跳到第1页}});

以上就是一个完整的查询方法

1. 页面自动刷新的写法:

searchBtn.click(); //查询按钮的id是searchBtn,在当前页面直接.click()即可自动刷新当前页面

2. 弹出层中自动刷新(如果打开弹出层,那么查询按钮这个页面就是父页面,弹出层就是子页面)

parent.searchBtn.click();//要自动刷新就需要调用父页面的searchBtn

3. 定义一个跳转到 ‘添加页面’ 的弹出层的写法:

var index = layer.open({id: 'openxxx', //设定一个id,防止重复弹出title:'添加xx',type: 2,offset: 't', //l代表窗口左侧打开弹出层,r代表右侧,t代表最上面,b代表最下面shade: 0.3, //父窗口阴影透明度area: ['100%', '60%'],  /*长度100%,宽度60% ,也可设置px*/content: '/toAdd',closeBtn: 0, //关闭按钮的样式,0是默认的shadeClose: true, //点击弹出层外空白处skin: 'layui-layer-win10'  // skin: 'layui-layer-molv'墨绿主题 layui-layer-lan 深蓝主题});
如果想要在弹出层关闭时刷新页面,那么就在上面定义的弹出层调用方法open中添加success,如下(关闭弹出层按钮被点击之后触发关闭弹出层,且调用查询按钮刷新页面)

因弹出层定义open时使用了shadeClose,因此点击弹出层空白处也会关闭弹出层,因此无论是点击空白处或者点击弹出层右上方的关闭按钮,都会触发下方的click方法

,success: function(layero, index) {$('#layui-layer-shade' + index).click(function() {layer.close(index);//关闭滑层动画searchBtn.click();//弹出层关闭时就里面点击确定才干掉,否则弹出层取消也去刷新页面,没有必要,因此注释掉不要每次都刷新页面});}

但是使用以上方法定义页面关闭弹出层后刷新页面有个问题,当弹出层方法的content定义的url不固定,而是open方法定义成一个方法开放调用时,有些页面关闭弹出层是不希望刷新页面的,因此就需要改变这种刷新方法,如下:

//弹出层的js中定义当操作成功后关闭当前弹出层,并触发父页面刷新,而操作失败时不触发:
$.ajax({type: 'POST',url: '/xxxt?id=' + data.field.id,success: function(res) {if (res.code === 0) {layer.msg('xx成功', {time: 500, icon: 1}, function() {var iframeIndex = parent.layer.getFrameIndex(window.name);parent.layer.close(iframeIndex);parent.mteSearchBtn.click();//触发父页面的搜索按钮(searchBtn是按钮的ID)});} else {layer.msg(res.msg, { time: 2000 }, function() {});//失败时只提示信息,不关闭弹出层且不刷新父页面}}
});

以上js定义后,那么父模块中的打开弹出层方法中定义的,success代码块就必须删掉,否则就可能出现你弹出层关闭后刷新页面,父页面的success又调用一次,造成两次调用浪费资源

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/115091.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于侏儒猫鼬优化的BP神经网络(分类应用) - 附代码

基于侏儒猫鼬优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于侏儒猫鼬优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.侏儒猫鼬优化BP神经网络3.1 BP神经网络参数设置3.2 侏儒猫鼬算法应用 4.测试结果…

闭包(函数)

把内部函数通过return扔出去 必要条件

RobotRules 和UserAgent来下载文件

以下是一个使用WWW::RobotRules和LWP::UserAgent来下载文件的Perl程序&#xff1a; #!/usr/bin/perl ​ use strict; use warnings; use WWW::RobotRules; use LWP::UserAgent; use HTTP::Request; use HTTP::Response; ​ my $url http://www.people.com.cn/; my $agent LW…

网络协议--Traceroute程序

8.1 引言 由Van Jacobson编写的Traceroute程序是一个能更深入探索TCP/IP协议的方便可用的工具。尽管不能保证从源端发往目的端的两份连续的IP数据报具有相同的路由&#xff0c;但是大多数情况下是这样的。Traceroute程序可以让我们看到IP数据报从一台主机传到另一台主机所经过…

【前端】Layui小功能收集整理

目录 1、layui 鼠标悬浮提示文字 2、关闭当前窗口并刷新父页面 3、子iframe关闭/传值/刷新父页面 1、layui 鼠标悬浮提示文字 鼠标放在图标上悬浮显示提示信息&#xff0c;效果图如下 <div style"float:left; line-height:40px">道试题 <i class"l…

使用WPF模仿Windows记事本界面

本次仅模仿Windows记事本的模样&#xff0c;并未实现其功能。 所有代码如下&#xff1a; <Window x:Class"控件的基础使用.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/…

XML与html解析,区别,如何使用

目录 简介: HTML&#xff08;超文本标记语言&#xff09;&#xff1a; 如何使用HTML&#xff1a; XML&#xff08;可扩展标记语言&#xff09;&#xff1a; 如何使用XML&#xff1a; 区别&#xff1a; 简介: XML&#xff08;可扩展标记语言&#xff09;和 HTML&#xff…

【Godot】【BUG】4.x NavigationAgent 导航不生效

4.2.beta2 试了半天才发现原来默认只对第一个有导航的 TileMap 的第 1 层 生效&#xff0c;而我设置的导航层不是第一层&#xff0c;然后我新建了一个 TileMap 将导航的瓦片设置到这个 TileMap 上了&#xff0c;如图 这样就解决了问题&#xff0c;不用再修改默认设置的东西了&a…

机器学习tip:sklearn中的pipeline

文章目录 1 加载数据集2 构思算法的流程3 Pipeline执行流程的分析ReferenceStatement 一个典型的机器学习构建包含若干个过程 源数据ETL数据预处理特征选取模型训练与验证 一个典型的机器学习构建包含若干个过程 以上四个步骤可以抽象为一个包括多个步骤的流水线式工作&…

四大特性模块(module)

module的动机 C20中新增了四大特性之一的模块(module)&#xff0c;用以解决传统的头文件在编译时间及程序组织上的问题。 modules 试图解决的痛点 能最大的痛点就是编译慢, 头文件的重复替换, 比如你有多个翻译单元, 每一个都调用了 iostream, 就得都处理一遍. 预处理完的源…

三维模型表面积计算方法

【版权声明】 本文为博主原创文章&#xff0c;未经博主允许严禁转载&#xff0c;我们会定期进行侵权检索。 更多算法总结请关注我的博客&#xff1a;https://blog.csdn.net/suiyingy&#xff0c;或”乐乐感知学堂“公众号。 本文章来自于专栏《Python三维模型处理基础》的系列文…

在线存储系统源码 网盘网站源码 云盘系统源码

Cloudreve云盘系统源码-支持本地储存和对象储存,界面美观 云盘系统安装教程 测试环境:PHP7.1 MYSQL5.6 Apache 上传源码到根目录 安装程序: 浏览器数据 http://localhost/CloudreveInstallerlocalhost更换成你的网址 安装完毕 记住系统默认的账号密码 温馨提示:如果默认…

RustDay06------Exercise[81-90]

81.宏函数里面的不同的匹配规则需要使用分号隔开 // macros4.rs // // Execute rustlings hint macros4 or use the hint watch subcommand for a // hint.// I AM NOT DONE#[rustfmt::skip] macro_rules! my_macro {() > {println!("Check out my macro!");};($…

C++ 字面量

在编译之前就已经知道的值。字面量的形式和值决定了它的数据类型。 整型字面量 整型字面值具体的数据类型由它的值和符号决定。默认情况&#xff0c;十进制字面量是带符号数&#xff0c;八进制和十六进制字面值既可能是带符号的也可能是无符号的。十进制字面值的类型是int、l…

【STM32】标准库与HAL库对照学习系列教程大全

【STM32】标准库与HAL库对照学习系列教程大全 一、前言二、准备工作三、基础篇四、进阶篇五、特别篇六、外设篇 一、前言 前言&#xff1a;开始工作后&#xff0c;学习的时间变少了很多&#xff0c;但是今年的1024节&#xff0c;还是打算送个福利给大家&#xff0c;将之前的STM…

[WSL][ubuntu]解决WSL Ubuntu+xfce4 图形界面一段时间后黑屏

问题场景&#xff1a;WLS中Ubuntu安装xdrp进行远程桌面连接一段时间后会黑屏&#xff0c;这是因为锁屏后不能正常唤醒导致&#xff0c;因此很直接方法就是不让锁屏&#xff1a; 1、进入图形界面&#xff0c;点击右上角Applications--->Settings--->Light Locker Setting…

【Hive SQL 每日一题】环比增长率、环比增长率、复合增长率

文章目录 环比增长率同比增长率复合增长率测试数据需求说明需求实现 环比增长率 环比增长率是指两个相邻时段之间某种指标的增长率。通常来说&#xff0c;环比增长率是比较两个连续时间段内某项数据的增长量大小的百分比。 环比增长率反映了两个相邻时间段内某种经济指标的变…

【Java 进阶篇】Java XML快速入门:理解、解析和生成XML

XML&#xff08;可扩展标记语言&#xff09;是一种常用于存储和交换数据的标记语言&#xff0c;而Java是一种强大的编程语言&#xff0c;它具有处理XML的能力。在本篇博客中&#xff0c;我们将探讨XML的基础知识&#xff0c;学习如何在Java中解析和生成XML文档&#xff0c;以及…

springboot 程序设计优雅退出

一 springboot优雅退出 1.1 概述 在springboot2.3版本后&#xff0c;实现了优雅退出功能。当server.shutdowngraceful启用时&#xff0c;在 web 容器关闭时&#xff0c;web 服务器将不再接收新请求&#xff0c;并将剩余活动执行完成给设置一个缓冲期。缓冲期 timeout-per-shu…

LeetCode75——Day13

文章目录 一、题目二、题解 一、题目 1679. Max Number of K-Sum Pairs You are given an integer array nums and an integer k. In one operation, you can pick two numbers from the array whose sum equals k and remove them from the array. Return the maximum num…