對(duì)Layer彈窗使用及返回?cái)?shù)據(jù)接收的實(shí)例詳解
Layer做為彈窗,主頁(yè)面代碼:
注意1. callback()方法 返回字符串,再data:JSON.parse(res)轉(zhuǎn)為ajax提交時(shí)的json參數(shù)
注意2. textarea 上使用append方法沒(méi)有效果,改寫(xiě): 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>
//點(diǎn)擊事件,彈出窗口
function openCitySelect(){
layer.open({
type: 2, //以frame型式加載content頁(yè)面
title: "設(shè)置區(qū)域",
shadeClose: true,
shade: 0.4,
area: ['90%', '90%'],
content: "{:U('user/index/citylist')}", //指向頁(yè)面
btn: ['選擇城市','追加城市','關(guān)閉'], //底部按鈕
yes: function(index){
//當(dāng)點(diǎn)擊‘選擇城市'按鈕的時(shí)候,獲取彈出層返回的值
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ǐng)至少選擇一個(gè)地區(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("錯(cuò)誤??!");
}
});
//最后關(guān)閉彈出層
layer.close(index);
},
btn2:function(index){
//當(dāng)點(diǎn)擊‘追加城市'按鈕的時(shí)候,獲取彈出層返回的值
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ǐng)至少選擇一個(gè)地區(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("錯(cuò)誤!!");
}
});
//最后關(guān)閉彈出層
layer.close(index);
},
cancel: function(){
//右上角關(guān)閉回調(diào)
}
});
}
彈窗頁(yè)面的代碼:
注意: window.callback 用來(lái)將數(shù)據(jù)返回到主頁(yè)
<script type="text/javascript" src="__PUBLIC__/js/layui2/layui.js"></script>
<script>
//加載模塊
layui.use('form', function(){
var $ = layui.jquery, form = layui.form ;
//返回?cái)?shù)據(jù)的方法, 在layui中 用window.前綴可以被外面訪問(wèn)到.
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>
以上這篇對(duì)Layer彈窗使用及返回?cái)?shù)據(jù)接收的實(shí)例詳解就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
BootStrap table實(shí)現(xiàn)表格行拖拽效果
這篇文章主要為大家詳細(xì)介紹了BootStrap table實(shí)現(xiàn)表格行拖拽效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12
用XMLDOM和ADODB.Stream實(shí)現(xiàn)base64編碼解碼實(shí)現(xiàn)代碼
用 XMLDOM 和 ADODB.Stream 實(shí)現(xiàn)base64編碼解碼實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-11-11
easyui form validate總是返回false的原因及解決方法
下面小編就為大家?guī)?lái)一篇easyui form validate總是返回false的原因及解決方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
小程序使用wxs解決wxml保留2位小數(shù)問(wèn)題
這篇文章主要介紹了小程序使用wxs解決wxml保留2位小數(shù)問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
JS奇技之利用scroll來(lái)監(jiān)聽(tīng)resize詳解
這篇文章主要給大家介紹了JS奇技之利用scroll來(lái)監(jiān)聽(tīng)resize的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-06-06
scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條并分頁(yè)顯示(zepto.js)
這篇文章主要為大家詳細(xì)介紹了scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條并分頁(yè)顯示示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12
簡(jiǎn)單實(shí)現(xiàn)jquery焦點(diǎn)圖
這篇文章主要為大家詳細(xì)介紹了如何簡(jiǎn)單實(shí)現(xiàn)jquery焦點(diǎn)圖效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12

