对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 相关文章推荐
JS控制表格隔行变色
Jun 26 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
javascript时间函数基础介绍
Mar 28 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
深入理解Vue2.x的虚拟DOM diff原理
Sep 27 Javascript
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 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下实现伪 url 的超简单方法[转]
2007/09/24 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
PHP异常处理浅析
2015/05/12 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
python实现发送和获取手机短信验证码
2016/01/15 Python
python实现SOM算法
2018/02/23 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
Python发送邮件实现基础解析
2020/08/14 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
中国最大的名表商城:万表网
2016/08/29 全球购物
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
担保书格式及范文
2014/04/01 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
车辆转让协议书
2014/09/24 职场文书
假释思想汇报范文
2014/10/11 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书