用于辅助在 bootstrap-dialog 中的表现:app-jquery-dialog.js
- // 用于通某个元素共享配置数据
- $.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的更多相关文章
- 在Bootstrap开发框架中使用Grid++报表
之前在随笔<在Winform开发中使用Grid++报表>介绍了在Winform环境中使用Grid++报表控件,本篇随笔介绍在Bootstrap开发框架中使用Grid++报表,也就是Web环 ...
- Dialog中更新Activity的数据显示
假设有一个activity,activity中有一个Button和一个TextView,点击按钮,弹出Dialog,对话框中有一个ListView,选中ListView中的某一项,关闭对话框,更新ac ...
- bootstrap -- meta中的viewport指令
在查看bootstrap教程中,碰到 <meta name="viewport" content="width=device-width, initial-scal ...
- 《MFC dialog中加入OpenGL窗体》
<MFC dialog中加入OpenGL窗体> 最近学习了如何在MFC对话框程序中加入OpenGL窗体的方法,在这里将自己的实现过程归纳一下. 步骤零: 加入PictureControl控 ...
- vue+el-element中根据文件名动态创建dialog的方法
背景 在项目中使用对话框的通常做法是把对话框封装成组件,在使用的地方引入,然后添加到template,使用visible.sync控制对话框的显示/隐藏,监听confirm事件处理用户点击确定.如下: ...
- Easyui dialog中嵌入iframe
如果easyui dialog的地址属性用href超链接,easyui 不会加载整个url页面,只会截取url目标页的body体间的html, 如果想加载把其他页面 加载进dialog的iframe中 ...
- bootstrap Table 中给某一特定值设置table选中
bootstrap Table 中给某一特定值设置table选中 需求: 如图所示:左边地图人员选定,右边表格相应选中. 功能代码: //表格和图标联动 function changeTableSel ...
- Bootstrap.css 中请求googleapis.com/css?family 备忘录
问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open ...
- 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug
本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...
随机推荐
- Java学习笔记之static
1.static可以用于修饰成员变量.方法以及块,并不会改变类中成员的权限修饰,如:private修饰的成员变量,类外只能类名或非私有方法调用,而不能使用对象名调用. 2.static方法和成员变量, ...
- js操作select和option
1.动态创建select function createSelect(){ var mySelect = document.createElement_x("select"); m ...
- UVA 11992 线段树
input r c m r<=20,1<=m<=20000 m行操作 1 x1 y1 x2 y2 v add v 2 x1 y1 x2 y2 v s ...
- linux 查看磁盘、文件夹、文件大小(df du)
du 查看文件夹大小 1.查看当前文件夹中所有文件夹及其子文件夹的大小,注意是文件夹大小,不是文件 # du -h -rw-r--r-- 1 root root 82785865 6月 9 15:53 ...
- IT项目各阶段管理
- Vector2.Angle 的 bug
获取角度 ,官方提供了 Vector2.Angle 来得值,他的值是在 0 ,180之间 原始代码是 public static float Angle(Vector3 from, Vector3 ...
- Python实现删除目录下相同文件
让我们来分析一下这个问题:首先,文件个数非常多,手工查找是不现实的,再说,单凭我们肉眼,在几千张图片或文件里面找到完全相同的难度也是很大的.所以要用程序实现.那么用程序怎么实现呢?根据什么判断两个文件 ...
- C#,js数据排序及其操作
List<int> listint=new List<int>{2,1,7,3,8,5,4,6};listint.Sort((x, y) => x - y); var a ...
- java 常见异常总结
异常1:java.util.NoSuchElementException: No line found 原因:Java 是顺序执行的 你执行到.close() 后就代表 你关闭了 流,你再去调用已经被 ...
- Linux学习 -- Shell基础 -- Bash基本功能
历史命令 history -c clear -w 写入 ~/.bash_history 默认保存1000条, 可在/etc/profile中修改 调用 Tab补全 命令.目录.文件 命令别名 ...