1. 程式人生 > >layer常用提示框

layer常用提示框

文章轉自https://blog.csdn.net/alice_qixin/article/details/70210420,感謝作者。

 

一 layer的普通提示框

效果:

 

 

程式碼:

layer.alert('次案件已回庫,請選擇其他案件', {
icon: 5,
title: "提示"
});

title屬性不設定時預設為“資訊”。如下

 

 

二 layer 帶輸入框的提示框

效果:

 

注意!必須引入layer.js   如果不行再引入他的延伸js layer.ext.js 或者layer3.0.1版本的layer.js

程式碼:


layer.prompt({
 formType: 2,
 value: '駁回!',
 title: '請輸入駁回理由'
}, function(value, index, elem){
layer.close(index);
//layer.alert(value);
$.ajax({
type: "post",
url: "/visit/updateVisitApply",
data: {
"id": id,
"status": "3",
"reason":value

},
async: true,

});
layer.alert('駁回成功'); 
location=location;
});

 

   value:輸入框的預設值

   title:提示框的標題

   layer.close(index);  點選確定後關閉提示框。

 

三 layer 的判斷提示框

效果:

程式碼:

layer.confirm('您確定要刪除這條資料嗎?', {
btn: ['確定','取消'] //按鈕
}, function()
{
layer.closeAll('dialog');
$.ajax({
type: "post",
url: "${pageContext.request.contextPath}/cuishou/delete",
data: {
"id": id
},
success : function(data){
 
}
});
});

layer.closeAll('dialog');  點選確定關閉提示框

 

四 layer的iframe彈框

效果:在頁面中彈出一個子頁面。呼叫別的jsp

 

程式碼:

首先先定義

//定義全域性變數
var myLayer = {
index : 0,
close : function() {
layer.close(this.index);
location.reload();
},
parentCaseIds : function() {
var array = new Array();
var checks = $("table tr td input[type='checkbox']:checked");
$.each(checks, function() {
var dataId = $(this).parent().parent().attr("data-id");
if (dataId)
array.push(dataId);
});
return array;
}


};

$("#roleSelect").on("click",function(){
var userId = $("input[type='radio']:checked").val();
if(typeof(userId)=='undefined'){
layer.alert('請選擇員工', {
icon: 5
});
return;
}else{
//彈出框分配角色介面
          myLayer.index=layer.open({
           type: 2, 
           title: "角色分配",
           area: ['400px','300px'],
           content:'${pageContext.request.contextPath }/cuishou/roleList?emplist=${emplist}&userId='+userId+''
          }); 
}
});

 

獲取父頁面table選中行的引數

js程式碼:

//獲取被選中的tr
var id=$('.selected', window.parent.document).find(".needid").attr('data-id');//獲取父頁面單選選中的自定義id值

var visitid=$('.selected', window.parent.document).find(".visitid").html();//獲取父頁面單選選中的行的td根據td的class獲取td內容

var empId = $("input[type='radio']:checked").val();//獲取本頁面單選框的值

var appointName=$("input[type='radio']:checked").parents("tr").find(".appointName").html();//獲取本頁面單選選中的行根據td的class獲取td內容