layer弹出层全屏及关闭方法


Posted in Javascript onAugust 17, 2018

一、首先引用JS文件

<script src="../../js/common/layer/layer.js"></script>

二、全屏调用以下代码

var index = layer.open({
 type: 2,
 content: url,
 area: ['300px', '195px'], 
 title: false,
 maxmin: true, 
 closeBtn: 0
    });
layer.full(index);

三、关闭弹出层

var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);

总结:

这种打开的页面的好处是:直接关闭当前弹出层,不用刷新整个页面,不用加载数据,性能高,节约时间,缺点是查询参数的传输不方便。

补充:

这种写法产地参数十分的不方便,试过array方式传参解读过去的都是object根本不是想要的数据,而json格式数据因为里面带有引号只会传递部分数据,我在这里总结了一个方法,从几种方法里面选的一个相对较好的传参方式:

[{"name":"periodstart","value":"2014-01"},{"name":"periodend","value":"2014-12"},{"name":"fkcategory","value":""},{"name":"fkCategoryName","value":""},{"name":"fkmandept","value":""},{"name":"fkMandeptName","value":""},{"name":"fkusedept","value":""},{"name":"fkUsedeptName","value":""},{"name":"pkcurrtype","value":""},{"name":"total","value":""}]
JSON.stringify($('#searchForm').serializeArray()).replace(/"+/g,'').replace(/name:/g,'').replace(/,value:/g,'=').replace(/},{/g,',');

这是先将一个form表单里面的数据序列化出来,然后转为json格式,然后将json格式的数据转为map避免json数据里面引号对数据的传递影响,然后在后台直接在后台强转为map格式的数据,非常方便。

Map<String, String> map = new HashMap<String, String>();
 String data = "{periodstart=2014-01,periodend=2014-12,fkcategory=,"
 + "fkCategoryName=,fkmandept=,fkMandeptName=,fkusedept=,fkUsedeptName=,pkcurrtype=,total=}";;
 data = data.substring(1, data.length()-1);//去掉前后括号
 String[] arraydata = data.split(",");//按“,”将其分为字符数组
 for (int i = 0; i < arraydata.length; i++) {
  int j = arraydata[i].indexOf("=");
  map.put(arraydata[i].substring(0, j-1), arraydata[i].substring(j+1, arraydata[i].length()));
 }
 Object o = map.get("perioden");
 System.out.println(o.toString());
{periodstart=2014-01,periodend=2014-12,fkcategory=,fkCategoryName=,fkmandept=,fkMandeptName=,fkusedept=,fkUsedeptName=,pkcurrtype=,total=}

以上这篇layer弹出层全屏及关闭方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 Javascript
JS 实现获取打开一个界面中输入的值
Mar 19 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
原生javascript实现的一个简单动画效果
Mar 30 Javascript
vue.js实现含搜索的多种复选框(附源码)
Mar 23 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
vue+iview+less 实现换肤功能
Aug 17 #Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 #jQuery
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 #Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 #Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 #Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 #Javascript
LayerClose弹窗关闭刷新方法
Aug 17 #Javascript
You might like
PHP4 与 MySQL 交互使用
2006/10/09 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
zTree插件下拉树使用入门教程
2016/04/11 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
js实现百度淘宝搜索功能
2020/02/17 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
python基础教程之udp端口扫描
2014/02/10 Python
python中精确输出JSON浮点数的方法
2014/04/18 Python
python里将list中元素依次向前移动一位
2014/09/12 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
python随机取list中的元素方法
2018/04/08 Python
Python Flask框架扩展操作示例
2019/05/03 Python
Python创建或生成列表的操作方法
2019/06/19 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
如何利用python发送邮件
2020/09/26 Python
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
酒店办公室文员岗位职责
2013/12/18 职场文书
小学生班会演讲稿
2014/01/09 职场文书
教师开学感言
2014/02/14 职场文书
餐厅总厨求职信
2014/03/04 职场文书
手术室护士个人总结
2015/02/13 职场文书
建国大业观后感
2015/06/01 职场文书
旷工检讨书大全
2015/08/15 职场文书
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL