对Layer弹窗使用及返回数据接收的实例详解


Posted in Javascript onSeptember 26, 2019

Layer做为弹窗,主页面代码:

注意1. callback()方法 返回字符串,再data:JSON.parse(res)转为ajax提交时的json参数

注意2. textarea 上使用append方法没有效果,改写: var str = $("#area").val() + “\n”+d; $("#area").val(str);

//引入js 必须要有(1.8以上版本) jquery 
 <script src="__PUBLIC__/js/jquery.js"></script>
 <script type="text/javascript" src="__PUBLIC__/js/layer/layer.js"></script>
 
//点击事件,弹出窗口
function openCitySelect(){
	 layer.open({
   type: 2, //以frame型式加载content页面
   title: "设置区域",
   shadeClose: true,
   shade: 0.4,
   area: ['90%', '90%'],
   content: "{:U('user/index/citylist')}", //指向页面
   btn: ['选择城市','追加城市','关闭'], //底部按钮
   yes: function(index){
    //当点击‘选择城市'按钮的时候,获取弹出层返回的值 
    var res = window["layui-layer-iframe" + index].callback();
    //打印返回的值,看是否有我们想返回的值。    
    $.ajax({
	    url:"{:U('user/index/getListOfCity')}",
	    type:"post",
	    data:JSON.parse(res),
     success:function(data){ 	 
	     //console.log(data);
	     var a = JSON.parse(data);
	    b = a.length;
	    if (0 >= b) {
	     Wind.use('artDialog',function(){
	      art.dialog({
	      id : "alert",
	      icon : "error",
	      content : "请至少选择一个地区",
	      ok : function() {}
	      });
	     });
	    }else {
	      var thisCitys = JSON.parse(data);
	 					var d="";
	 					var new_arr = []; 					
	      for (var f = 0; f < thisCitys.length; f++) {    	 
	     	  if($.inArray(thisCitys[f],new_arr)==-1) { 	     	 	 
	     	 		 new_arr.push(thisCitys[f]); 	     	 	
	     	  }
	      }
	      //去重
	      for(var i=0;i<new_arr.length; i++){
	     	 d = isNull(d) ? new_arr[i] : d + ("\n" + new_arr[i])
	      }
	       // }
	     
	      $("#area").val(d);
	     
	     lineTotal('area');
	    } 
	    },
	    error:function(e){
	     alert("错误!!"); 	     
	    }
	   }); 
    //最后关闭弹出层
    layer.close(index);
   },
   btn2:function(index){
  	 //当点击‘追加城市'按钮的时候,获取弹出层返回的值
    var res = window["layui-layer-iframe" + index].callback();
    //打印返回的值,看是否有我们想返回的值。
    
    $.ajax({
 	    url:"{:U('user/index/getListOfCity')}",
 	    type:"post",
 	    data:JSON.parse(res),
     success:function(data){ 	 
 	     //console.log(data);
 	     var a = JSON.parse(data);
 	    b = a.length;
 	    if (0 >= b) {
 	     Wind.use('artDialog',function(){
 	      art.dialog({
 	      id : "alert",
 	      icon : "error",
 	      content : "请至少选择一个地区",
 	      ok : function() {}
 	      });
 	     });
 	    }else {
 	      var thisCitys = JSON.parse(data);
 	 					var d="";
 	 					var new_arr = []; 					
 	      for (var f = 0; f < thisCitys.length; f++) {    	 
 	     	  if($.inArray(thisCitys[f],new_arr)==-1) { 	     	 	 
 	     	 		 new_arr.push(thisCitys[f]); 	     	 	
 	     	  }
 	      }
 	      //去重
 	      for(var i=0;i<new_arr.length; i++){
 	     	 d = isNull(d) ? new_arr[i] : d + ("\n" + new_arr[i])
 	      }
 	       // }
 	      var str = $("#area").val() + "\n"+d; 	
 	      console.log(str);
 	      $("#area").val(str);
 	     
 	     lineTotal('area');
 	    } 
 	    },
 	    error:function(e){
 	     alert("错误!!"); 	     
 	    }
 	   }); 
    //最后关闭弹出层
    layer.close(index);
   },
   cancel: function(){
    //右上角关闭回调
   }
  });
 }

弹窗页面的代码:

注意: window.callback 用来将数据返回到主页

<script type="text/javascript" src="__PUBLIC__/js/layui2/layui.js"></script>
 <script>  
 		
  //加载模块 	  	 
 	 layui.use('form', function(){   
   var $ = layui.jquery, form = layui.form ; 
  //返回数据的方法, 在layui中 用window.前缀可以被外面访问到.
   window.callback = function() {
				var arr = new Array();
				$("#province :checkbox[checked]").each(function(i){
					arr[i] = $(this).val();
				});
				var vals = arr.join(",");
				var has_pro = $("#pro").is(':checked')?1:0;
				var has_city = $("#city").is(':checked')?1:0;
				var has_county = $("#county").is(':checked')?1:0;
				var has_end = $("#short_name").is(':checked')?1:0;
				var has_and_pro = $("#pro_city").is(':checked')?1:0;
				var has_and_city = $("#city_county").is(':checked')?1:0;
				var result = '{ "provinces":" ' + vals + '","has_pro":"' + has_pro + '","has_city":"' + has_city + '","has_county":"' + has_county 
					+ '","has_end":"' + has_end + '","has_and_pro":"' + has_and_pro + '","has_and_city":"' + has_and_city + '"}';
				return result;
  };
  }); 	 
 	 
 	</script>

以上这篇对Layer弹窗使用及返回数据接收的实例详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中filter方法用法实例分析
Feb 06 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
微信小程序如何获取用户收货地址
Nov 27 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
Vue 刷新当前路由的实现代码
Sep 26 #Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 #Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 #Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 #Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 #Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 #Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 #Javascript
You might like
学习php笔记 字符串处理
2010/10/19 PHP
php 如何获取数组第一个值
2013/08/06 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
javascript 函数式编程
2007/08/16 Javascript
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
Node.js的npm包管理器基础使用教程
2016/05/26 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
教师个人读书活动总结
2014/07/08 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers
Django程序的优化技巧
2021/04/29 Python
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL