对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 相关文章推荐
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
Sep 29 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
Java 生成随机字符的示例代码
Jan 13 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 无法载入mysql扩展
2010/03/12 PHP
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Pycharm设置utf-8自动显示方法
2019/01/17 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
西部世纪.net笔试题面试题
2014/04/03 面试题
工程专业应届生求职信
2014/02/19 职场文书
保证书格式范文
2014/04/28 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
音乐会主持人开场白
2015/05/28 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript