// 用于通某个元素共享配置数据
$.extend($.fn, {
formOption : function(showOpt) {
var opt = $.data(this[0], "formOpt"); var settings;
if (opt) {
settings = $.extend({}, opt, showOpt);
} else {
settings = showOpt;
} $.data(this[0], "formOpt", settings);
},
getFormOpt : function() {
if (this[0] != undefined) {
var opt = $.data(this[0], "formOpt");
if (opt != undefined && opt != null)
return opt;
}
return {};
}
}) $.FORM = {
showConfirm : function(showOpt) {
var opt = {
title : showOpt.title,
message : showOpt.message,
draggable : true,
closeByBackdrop : false,
type : BootstrapDialog.TYPE_WARNING,
buttons : [
{
id : "btn-confirm",
icon : 'glyphicon glyphicon-saved',
label : '确定',
cssClass : 'btn-warning',
action : function(dialogItself) {
if (showOpt.url != undefined) {
$.HTTP
.obj({
type : showOpt.ajaxType == undefined ? 'post'
: showOpt.ajaxType,
url : showOpt.url,
ajaxData : showOpt.ajaxData,
success : function(json) {
if (showOpt.autoClose) {
dialogItself.close();
$.NOTIFY
.showSuccess(
showOpt.successTitle,
showOpt.successMessage);
} else {
dialogItself
.setTitle(showOpt.successTitle);
dialogItself
.setMessage(showOpt.successMessage);
dialogItself
.setType(BootstrapDialog.TYPE_SUCCESS);
dialogItself
.setButtons([ {
icon : 'glyphicon glyphicon-saved',
label : '确定',
cssClass : 'btn-success',
action : function(
d) {
d.close();
}
} ]);
} if (showOpt.onSuccess)
showOpt.onSuccess(json);
}
})
} else {
if (showOpt.onConfirm(dialogItself)) {
dialogItself.close();
}
} }
}, {
icon : 'glyphicon glyphicon-ban-circle',
label : '取消',
action : function(dialogItself) {
dialogItself.close();
}
} ]
}; var dialog = BootstrapDialog.show(opt);
return dialog;
},
/**
* title,isReadOnly,postUrl,data,dataSource,fields,properties,dependencies ,
* formNodeCallback 收集表单信息回调
*/
showFormDialog : function(showOpt) { var dialog;
var buttons;
var showD = function(showOpt, data) {
if (showOpt.isReadOnly != undefined && showOpt.isReadOnly != null) {
if (showOpt.isReadOnly) {
// 只读模式
} else {
// 修改模式
buttons = [ {
icon : 'glyphicon glyphicon-saved',
label : '修改',
cssClass : 'btn-primary',
action : function(dialogItself) {
$.FORM.postForm(showOpt, dialogItself);
}
}, {
icon : 'glyphicon glyphicon-ban-circle',
label : '取消',
action : function(dialogItself) {
dialogItself.close();
}
} ];
}
} else {
// 添加模式
buttons = [ {
icon : 'glyphicon glyphicon-saved',
label : '保存',
cssClass : 'btn-primary',
action : function(dialogItself) {
$.FORM.postForm(showOpt, dialogItself);
}
}, {
icon : 'glyphicon glyphicon-ban-circle',
label : '取消',
action : function(dialogItself) {
dialogItself.close();
}
} ];
} dialog = $.FORM.showDialog(showOpt, buttons, data); } // 如果有数据先加载数据
if (showOpt.dataSource != undefined && showOpt.dataSource != null) {
$.ajax({
type : "get",
async : false,
url : showOpt.dataSource,
contentType : 'application/json',
dataType : "json",
success : function(json) {
if (json.stat == 1) {
showD(showOpt, json.data);
} else {
if (json.code != undefined) {
$.FORM.show_code_err(dialog, json);
} else {
$.FORM.show_sys_err(dialog);
return;
}
}
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
var info = "XMLHttpRequest:"
+ JSON.stringify(XMLHttpRequest) + " ;textStatus:"
+ textStatus + "; errorThrown:"
+ JSON.stringify(errorThrown) + "; 【"
+ showOpt.postUrl + "】";
console.log("系统错误 【url: " + showOpt.postUrl + "】" + info);
$.FORM.show_sys_err(dialog, XMLHttpRequest);
}
});
} else {
showD(showOpt, {});
} }, showDialog : function(showOpt, buttons, data) {
showOpt.buttons = $.extend(showOpt.buttons, buttons);
showOpt.data = $.extend({}, showOpt.data, data); if (showOpt.buttons == undefined || showOpt.buttons == null) {
showOpt.buttons = [ {
icon : 'glyphicon glyphicon-ok',
label : '确定',
cssClass : 'btn-primary',
action : function(dialogItself) {
dialogItself.close();
}
} ];
} var cont = $('<div>加载数据中,请稍后...</div>');
var opt = $
.extend(
{
title : showOpt.title,
message : function(dialog) {
return cont;
},
onshown : function(dialogRef) {
var contTmp = $('<div></div>'); var response = '';
if (showOpt.templateUrl) {
$
.ajax({
url : showOpt.templateUrl,
async : false,
success : function(res) {
try {
var t = eval("(" + res
+ ")");
if (t != null
&& t.stat == 0) {
$.FORM
.show_code_err(
null,
t);
if (t.code == 1403) {
cont
.html("<div>您可能已经离线,请重新刷新网页后再试!</div>");
}
dialog
.enableButtons(false);
return; } else {
response = res;
}
} catch (e) {
response = res;
} }
});
} else if (showOpt.template) {
response = "<div>" + showOpt.template
+ "</div>";
} else {
response = "<div></div>";
} if (showOpt.data != undefined) {
// 只要有数据,就用 artTemplate
// 渲染
if (showOpt.templateOption != undefined) {
if (showOpt.templateOption.helpers) {
for ( var i in showOpt.templateOption.helpers) {
var help = showOpt.templateOption.helpers[i];
if (help) {
template.helper(help.name,
help.action);
}
}
}
} var tempRes = template.compile(response);
var dt = tempRes(showOpt.data);
cont.html(dt); if (showOpt.isReadOnly != undefined
&& showOpt.isReadOnly != null
&& !showOpt.isReadOnly) {
// 编辑模式可以再用js2form填充form数据
var rootNode = cont
.find(showOpt.formId)[0];
if (rootNode && rootNode != null)
js2form(rootNode, showOpt.data);
else
js2form(cont[0], showOpt.data);
}
} else {
cont.html(contTmp[0]);
} // form 設置
var formOpt = $(showOpt.formId).getFormOpt();
if (showOpt.isReadOnly != undefined
&& showOpt.isReadOnly != null) { if (showOpt.isReadOnly) {
if (formOpt.onReadonlyMode != undefined)
formOpt
.onReadonlyMode(showOpt.data);
} else {
if (formOpt.onModifyMode != undefined)
formOpt.onModifyMode(showOpt.data);
}
} else {
if (formOpt.onCreateMode != undefined)
formOpt.onCreateMode(showOpt.data);
} if (formOpt.buttons != undefined) {
dialogRef.setButtons(formOpt.buttons);
}
},
draggable : true,
closeByBackdrop : false,
closeByKeyboard : true,
buttons : showOpt.buttons
}, showOpt.dialogOption); var dialog = BootstrapDialog.show(opt);
return dialog;
},
postForm : function(showOpt, dialog) {
dialog.setClosable(false);
dialog.enableButtons(false); var formOpt = $(showOpt.formId).getFormOpt(); var postform = $(showOpt.formId);
var validator = postform.validate(); if (formOpt.preValidDataHandler != undefined) {
if (formOpt.preValidDataHandler(dialog, validator) != true) {
dialog.setClosable(true);
dialog.enableButtons(true);
return;
}
} // validator.form();
if (!postform.valid()) {
postform.focus();
$.FORM.show_stack_err_context(dialog.getModalContent(), false, {
title : "提示",
text : "该页面还有" + validator.numberOfInvalids() + "个字段包含错误!",
type : "notice",
delay : 1500,
hide : true
});
dialog.setClosable(true);
dialog.enableButtons(true);
return;
} if (formOpt.preSloveDataHandler != undefined) {
if (formOpt.preSloveDataHandler(dialog) != true) {
dialog.setClosable(true);
dialog.enableButtons(true);
return;
}
} var formData; if (showOpt.postType) {
switch (showOpt.postType) {
case "multipart":
formData = new FormData(postform[0]);
break;
case "form":
formData = $.param(form2js(postform[0], '.', true,
formOpt.formNodeCallback));
break;
case "json":
formData = JSON.stringify(form2js(postform[0], '.', true,
formOpt.formNodeCallback));
break;
default:
return;
}
} else {
formData = form2js(postform[0], '.', true, formOpt.formNodeCallback);
} if (formOpt.prePostDataHandler != undefined) {
if (formOpt.prePostDataHandler(dialog, formData) != true) {
dialog.setClosable(true);
dialog.enableButtons(true);
return;
}
} if (showOpt.isDebug != undefined && showOpt.isDebug) {
var postdata = JSON.stringify(formData);
alert(postdata);
dialog.setClosable(true);
dialog.enableButtons(true);
return;
} var sendOpt = {
type : "post",
async : false,
url : showOpt.postUrl,
data : formData,
dataType : "json",
success : function(json) {
if (json.stat == 1) {
dialog.close();
new PNotify({
title : '修改成功!',
text : '信息修改成功。',
type : 'success',
animation : "fade",
shadow : true,
hide : true,
delay : 2000,
mobile : {
swipe_dismiss : true,
styling : true
} });
if (showOpt.onPostSuccess != undefined)
showOpt.onPostSuccess(json.data)
} else {
if (json.code != undefined) {
$.FORM.show_code_err(dialog, json);
} else {
$.FORM.show_sys_err(dialog);
}
} dialog.setClosable(true);
dialog.enableButtons(true);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
var info = "XMLHttpRequest:" + JSON.stringify(XMLHttpRequest)
+ " ;textStatus:" + textStatus + "; errorThrown:"
+ JSON.stringify(errorThrown) + "; 【" + showOpt.postUrl
+ "】";
console.log("系统错误 【url: " + showOpt.postUrl + "】" + info);
$.FORM.show_sys_err(dialog, XMLHttpRequest);
dialog.setClosable(true);
dialog.enableButtons(true);
}
}; if (showOpt.postType) {
switch (showOpt.postType) {
case "multipart":
sendOpt.async = false;
sendOpt.cache = false;
sendOpt.contentType = false;
sendOpt.processData = false;
break;
case "form":
sendOpt.contentType = 'application/x-www-form-urlencoded';
break;
case "json":
sendOpt.contentType = 'application/json';
break;
default:
return;
}
} $.ajax(sendOpt); },
show_sys_err : function(dialog, XMLHttpRequest) {
var opt = {
title : "系统错误",
text : "请您联系管理员!",
type : "error"
};
if (dialog == undefined || dialog == null) {
new PNotify(opt);
} else {
$.FORM.show_stack_err_context(dialog.getModalContent(), false, opt);
} },
show_code_err : function(dialog, json) {
var opt;
if (json.code != undefined && json.code == 1403) {
$.NOTIFY.showLogin();
return;
} else if (json.errorMessages != undefined
&& json.errorMessages != null && json.errorMessages.length > 0) {
opt = {
title : "错误",
text : json.errorMessages[0],
type : "notice",
delay : 1500,
hide : true
};
} if (dialog == undefined || dialog == null) {
new PNotify(opt);
} else {
$.FORM.show_stack_err_context(dialog.getModalContent(), false, opt)
} },
show_stack_err_context : function(context, modal, opt) {
var opts = !opt ? {} : opt;
opts.stack = modal ? {
"push" : "top",
"dir1" : "down",
"dir2" : "left",
"context" : context,
"modal" : true,
"overlay_close" : true
} : {
"push" : "top",
"dir1" : "down",
"dir2" : "left",
"context" : context
};
opts.addclass = "stack-modal";
new PNotify(opts);
}
}

用于辅助在 bootstrap-dialog 中的表现:app-jquery-dialog.js的更多相关文章

  1. 在Bootstrap开发框架中使用Grid++报表

    之前在随笔<在Winform开发中使用Grid++报表>介绍了在Winform环境中使用Grid++报表控件,本篇随笔介绍在Bootstrap开发框架中使用Grid++报表,也就是Web环 ...

  2. Dialog中更新Activity的数据显示

    假设有一个activity,activity中有一个Button和一个TextView,点击按钮,弹出Dialog,对话框中有一个ListView,选中ListView中的某一项,关闭对话框,更新ac ...

  3. bootstrap -- meta中的viewport指令

    在查看bootstrap教程中,碰到 <meta name="viewport" content="width=device-width, initial-scal ...

  4. 《MFC dialog中加入OpenGL窗体》

    <MFC dialog中加入OpenGL窗体> 最近学习了如何在MFC对话框程序中加入OpenGL窗体的方法,在这里将自己的实现过程归纳一下. 步骤零: 加入PictureControl控 ...

  5. vue+el-element中根据文件名动态创建dialog的方法

    背景 在项目中使用对话框的通常做法是把对话框封装成组件,在使用的地方引入,然后添加到template,使用visible.sync控制对话框的显示/隐藏,监听confirm事件处理用户点击确定.如下: ...

  6. Easyui dialog中嵌入iframe

    如果easyui dialog的地址属性用href超链接,easyui 不会加载整个url页面,只会截取url目标页的body体间的html, 如果想加载把其他页面 加载进dialog的iframe中 ...

  7. bootstrap Table 中给某一特定值设置table选中

    bootstrap Table 中给某一特定值设置table选中 需求: 如图所示:左边地图人员选定,右边表格相应选中. 功能代码: //表格和图标联动 function changeTableSel ...

  8. Bootstrap.css 中请求googleapis.com/css?family 备忘录

    问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open ...

  9. 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

    本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...

随机推荐

  1. List<T>转换为ObservableCollection<T>

    ObservableCollection能通知他变化了也正是因为它实现了INotifyPropertyChanged接口, 在wpf项目中经常会遇到把List<T>转换为Observabl ...

  2. cssText笔记

    style.cssText 用来获取/设置元素的样式 设置: <div id= "a" style= "background: red;"> doc ...

  3. Android OpenGL ES(三)OpenGL ES API 命名习惯 .

    OpenGL ES是个跨平台的3D图形开发包规范,最常见的实现是采用C语言实现的,Android OpenGL ES 实现上是使用Java 语言对底层的C接口进行了封装,因此在android.open ...

  4. 查找mysql数据库中所有包含特定名字的字段所在的表

    整个数据库查找 placement 字段: select * from INFORMATION_SCHEMA.columns where COLUMN_NAME Like '%placement%'; ...

  5. MFC笔记<持续更新>

    1.设置垂直滚动条的位置在末尾 SCROLLINFO si; GetScrollInfo(SB_VERT, &si, SIF_PAGE | SIF_RANGE | SIF_POS); si.f ...

  6. Windows下将ImageMagick移植到Android平台

    Windows下将ImageMagick移植到Android平台 原文链接  http://www.pedant.cn/2014/06/18/imagemagick-ported-android/ I ...

  7. windows下python+Django+eclipse开发环境的配置

    1.JDK环境的安装 在http://www.java.com/zh_CN/download/faq/develop.xml 页面下,点击JDK下载,下载所需的jdk版本.直接点击安装即可. 2.py ...

  8. java.lang.ClassNotFoundException: org.apache.lucene.store.Directory

    看下你的lucene-core.jar有没有在WEB-INF\lib下.

  9. discuz!迁移指南

    转自:http://jingyan.baidu.com/article/f7ff0bfc77114b2e26bb1390.html 曾经在本地搭建过一个discuz!论坛,现在买了域名和服务器,那么怎 ...

  10. h5移动端设计页面

    @京东设计中心 :去年JDC出了不少优秀的武媚娘…不,H5呢,大家都很拼,同时当然也积累了一些经验和教训,今天结合咱们的实战案例,从字体,排版,动效,音效,适配性,想法这几个方面好好聊一聊关于H5的设 ...