對Layer彈窗使用及返回數(shù)據(jù)接收的實例詳解
Layer做為彈窗,主頁面代碼:
注意1. callback()方法 返回字符串,再data:JSON.parse(res)轉(zhuǎn)為ajax提交時的json參數(shù)
注意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: "設(shè)置區(qū)域", shadeClose: true, shade: 0.4, area: ['90%', '90%'], content: "{:U('user/index/citylist')}", //指向頁面 btn: ['選擇城市','追加城市','關(guān)閉'], //底部按鈕 yes: function(index){ //當(dāng)點擊‘選擇城市'按鈕的時候,獲取彈出層返回的值 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 : "請至少選擇一個地區(qū)", 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("錯誤??!"); } }); //最后關(guān)閉彈出層 layer.close(index); }, btn2:function(index){ //當(dāng)點擊‘追加城市'按鈕的時候,獲取彈出層返回的值 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 : "請至少選擇一個地區(qū)", 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("錯誤??!"); } }); //最后關(guān)閉彈出層 layer.close(index); }, cancel: function(){ //右上角關(guān)閉回調(diào) } }); }
彈窗頁面的代碼:
注意: window.callback 用來將數(shù)據(jù)返回到主頁
<script type="text/javascript" src="__PUBLIC__/js/layui2/layui.js"></script> <script> //加載模塊 layui.use('form', function(){ var $ = layui.jquery, form = layui.form ; //返回數(shù)據(jù)的方法, 在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彈窗使用及返回數(shù)據(jù)接收的實例詳解就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Javascript獲取HTML靜態(tài)頁面參數(shù)傳遞值示例
獲取HTML靜態(tài)頁面參數(shù)傳遞值可以利用split函數(shù)來按參數(shù)切成數(shù)組、利用正則表達式來獲取,具體實現(xiàn)如下,感興趣的朋友可以參考下2013-08-08javascript forEach通用循環(huán)遍歷方法
循環(huán)遍歷一個元素是開發(fā)中最常見的需求之一,那么讓我們來看一個由框架BASE2和Jquery的結(jié)合版本吧.2010-10-10moment.js 計算當(dāng)前一周、一月對應(yīng)日期的實例
這篇文章主要介紹了moment.js 計算當(dāng)前一周、一月對應(yīng)日期的實例代碼,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12javascript 框架小結(jié) 個人工作經(jīng)驗
javascript 框架小結(jié) 個人工作經(jīng)驗,對于新手來說還是值得學(xué)習(xí)的。2009-06-06JavaScript基于setTimeout實現(xiàn)計數(shù)的方法
這篇文章主要介紹了JavaScript基于setTimeout實現(xiàn)計數(shù)的方法,涉及javascript中setTimeout方法的使用技巧,需要的朋友可以參考下2015-05-05JS當(dāng)前頁面登錄注冊框,固定DIV,底層陰影的實例代碼
下面小編就為大家?guī)硪黄狫S當(dāng)前頁面登錄注冊框,固定DIV,底層陰影的實例代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09js判斷出兩個字符串最大子串的函數(shù)實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s判斷出兩個字符串最大子串的函數(shù)實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11