页面一:
点击新增黑名单,调用方法弹出窗口:
<button class="btn btn-sm btn-success" οnclick="javascript:addDetailInfo('${base!}/admin/api/wall/add?csrf=${csrf!}','黑名单','api-blacklist-form-add');">
<i class="fa fa-plus"> </i>新增黑名单
</button>
function addDetailInfo(url,title,formId,cssClasses){
var $that = $(this);
var formUrl = url;
if(url.indexOf("?")!=-1){
formUrl = url.substring(0,url.indexOf("?"))+"/form";
}else{
formUrl = url+"/form";
}
//失效
$that.attr("disabled","disabled");
// 调用add方法
var dialog = BootstrapDialog.show({
type : BootstrapDialog.TYPE_DEFAULT,
title : "<span class='text-success'><i class='fa fa-plus'></i> 新增</span>"+title,
closable: false,
draggable: true,
cssClass: cssClasses,
message:$('<div></div>').load(url),//加载弹出页面
size : BootstrapDialog.SIZE_WIDE,//弹出框大小。
onhide:function(){
$that.removeAttr("disabled");
},
buttons : [ {
id: 'btn-form-submit',
label: '提交',
icon: 'fa fa-check-circle',
cssClass: 'btn-primary',
action: function(dialogRef){
var $button = this;
//表单验证并提交
$('#'+formId).unbind("valid.form");
$('#'+formId).bind('valid.form', function(e, form){
// Before submitting the form, hold form, to prevent duplicate submission.
//$(form).holdSubmit();
$button.disable();
$.ajax({
type:'post',
url:formUrl,
data:$("#"+formId).serialize(),//序列化表格内容为字符串
cache:false,
dataType:'json',
success:function(data){
// After the form is submitted successfully, release hold.
//$(form).holdSubmit(false);
$button.enable();
BootstrapDialog.alertSuccess("提交成功!",function(){
//当前页面刷新
window.location.reload();
});
dialog.close();
},
error:function(error){
$button.enable();
BootstrapDialog.alertError("提交失败!");
}
});
});
//提交表单
$('#'+formId).trigger("submit");
}
},{
label : '关闭',
icon: 'fa fa-close',
action : function(dialogItself) {
dialogItself.close();
}
} ]
});
};
点击选择:再次加载弹出框
function chooseAppkey(){
var $that = $(this);
//失效
$that.attr("disabled","disabled");
// 调用add方法
var dialog = BootstrapDialog.show({
type : BootstrapDialog.TYPE_DEFAULT,
title : "选择AppKey",
closable: true,
draggable: false,
message:$('<div style="height:450px;overflow:auto;"></div>').load('${base!}/admin/api/wall/showappkey?csrf=${csrf!}'),
size : BootstrapDialog.SIZE_WIDE,
onhide:function(){
$that.removeAttr("disabled");
},
id:"appkeys"
});
}
点击选择的时候,关闭该层弹出框。将Appkey的值绑定给上一个页面。
function checkButton(key,name){
$("#appId").val(key);//上一层的表单id
$.each(BootstrapDialog.dialogs,function(id,dialogs){
if(id=='appkeys'){//遍历所有的弹出框,关闭制定的一个
dialogs.close();
}
});
}
另外:图二中表单appkey和IP必填一项。nice validate配置:
<input type="text" id="appId" name="appId" class="form-control contact" data-rule="required(from, .contact); appId" data-msg-required="请至少填写一种禁用方式" autocomplete="off" value="" placeholder="请输入应用的App Key,选填"/>
提示信息弹出位置:
IP表单配置:<span class="msg-box n-right" style="float:right;margin-bottom:25px;" for="appId"></span>
<input type="text" name="ip" class="form-control contact" style="width:90%;" data-rule="required(from, .contact); ip" data-msg-required=" " autocomplete="off" placeholder="请输入IP地址和域名地址,可以不填写">