用于辅助在 bootstrap-dialog 中的表现:app-jquery-dialog.js

  1 // 用于通某个元素共享配置数据
  2 $.extend($.fn, {
  3     formOption : function(showOpt) {
  4         var opt = $.data(this[0], "formOpt");
  5 
  6         var settings;
  7         if (opt) {
  8             settings = $.extend({}, opt, showOpt);
  9         } else {
 10             settings = showOpt;
 11         }
 12 
 13         $.data(this[0], "formOpt", settings);
 14     },
 15     getFormOpt : function() {
 16         if (this[0] != undefined) {
 17             var opt = $.data(this[0], "formOpt");
 18             if (opt != undefined && opt != null)
 19                 return opt;
 20         }
 21         return {};
 22     }
 23 })
 24 
 25 $.FORM = {
 26     showConfirm : function(showOpt) {
 27         var opt = {
 28             title : showOpt.title,
 29             message : showOpt.message,
 30             draggable : true,
 31             closeByBackdrop : false,
 32             type : BootstrapDialog.TYPE_WARNING,
 33             buttons : [
 34                     {
 35                         id : "btn-confirm",
 36                         icon : 'glyphicon glyphicon-saved',
 37                         label : '确定',
 38                         cssClass : 'btn-warning',
 39                         action : function(dialogItself) {
 40                             if (showOpt.url != undefined) {
 41                                 $.HTTP
 42                                         .obj({
 43                                             type : showOpt.ajaxType == undefined ? 'post'
 44                                                     : showOpt.ajaxType,
 45                                             url : showOpt.url,
 46                                             ajaxData : showOpt.ajaxData,
 47                                             success : function(json) {
 48                                                 if (showOpt.autoClose) {
 49                                                     dialogItself.close();
 50                                                     $.NOTIFY
 51                                                             .showSuccess(
 52                                                                     showOpt.successTitle,
 53                                                                     showOpt.successMessage);
 54                                                 } else {
 55                                                     dialogItself
 56                                                             .setTitle(showOpt.successTitle);
 57                                                     dialogItself
 58                                                             .setMessage(showOpt.successMessage);
 59                                                     dialogItself
 60                                                             .setType(BootstrapDialog.TYPE_SUCCESS);
 61                                                     dialogItself
 62                                                             .setButtons([ {
 63                                                                 icon : 'glyphicon glyphicon-saved',
 64                                                                 label : '确定',
 65                                                                 cssClass : 'btn-success',
 66                                                                 action : function(
 67                                                                         d) {
 68                                                                     d.close();
 69                                                                 }
 70                                                             } ]);
 71                                                 }
 72 
 73                                                 if (showOpt.onSuccess)
 74                                                     showOpt.onSuccess(json);
 75                                             }
 76                                         })
 77                             } else {
 78                                 if (showOpt.onConfirm(dialogItself)) {
 79                                     dialogItself.close();
 80                                 }
 81                             }
 82 
 83                         }
 84                     }, {
 85                         icon : 'glyphicon glyphicon-ban-circle',
 86                         label : '取消',
 87                         action : function(dialogItself) {
 88                             dialogItself.close();
 89                         }
 90                     } ]
 91         };
 92 
 93         var dialog = BootstrapDialog.show(opt);
 94         return dialog;
 95     },
 96     /**
 97      * title,isReadOnly,postUrl,data,dataSource,fields,properties,dependencies ,
 98      * formNodeCallback 收集表单信息回调
 99      */
100     showFormDialog : function(showOpt) {
101 
102         var dialog;
103         var buttons;
104         var showD = function(showOpt, data) {
105             if (showOpt.isReadOnly != undefined && showOpt.isReadOnly != null) {
106                 if (showOpt.isReadOnly) {
107                     // 只读模式
108                 } else {
109                     // 修改模式
110                     buttons = [ {
111                         icon : 'glyphicon glyphicon-saved',
112                         label : '修改',
113                         cssClass : 'btn-primary',
114                         action : function(dialogItself) {
115                             $.FORM.postForm(showOpt, dialogItself);
116                         }
117                     }, {
118                         icon : 'glyphicon glyphicon-ban-circle',
119                         label : '取消',
120                         action : function(dialogItself) {
121                             dialogItself.close();
122                         }
123                     } ];
124                 }
125             } else {
126                 // 添加模式
127                 buttons = [ {
128                     icon : 'glyphicon glyphicon-saved',
129                     label : '保存',
130                     cssClass : 'btn-primary',
131                     action : function(dialogItself) {
132                         $.FORM.postForm(showOpt, dialogItself);
133                     }
134                 }, {
135                     icon : 'glyphicon glyphicon-ban-circle',
136                     label : '取消',
137                     action : function(dialogItself) {
138                         dialogItself.close();
139                     }
140                 } ];
141             }
142 
143             dialog = $.FORM.showDialog(showOpt, buttons, data);
144 
145         }
146 
147         // 如果有数据先加载数据
148         if (showOpt.dataSource != undefined && showOpt.dataSource != null) {
149             $.ajax({
150                 type : "get",
151                 async : false,
152                 url : showOpt.dataSource,
153                 contentType : 'application/json',
154                 dataType : "json",
155                 success : function(json) {
156                     if (json.stat == 1) {
157                         showD(showOpt, json.data);
158                     } else {
159                         if (json.code != undefined) {
160                             $.FORM.show_code_err(dialog, json);
161                         } else {
162                             $.FORM.show_sys_err(dialog);
163                             return;
164                         }
165                     }
166                 },
167                 error : function(XMLHttpRequest, textStatus, errorThrown) {
168                     var info = "XMLHttpRequest:"
169                             + JSON.stringify(XMLHttpRequest) + " ;textStatus:"
170                             + textStatus + "; errorThrown:"
171                             + JSON.stringify(errorThrown) + "; 【"
172                             + showOpt.postUrl + "】";
173                     console.log("系统错误 【url: " + showOpt.postUrl + "】" + info);
174                     $.FORM.show_sys_err(dialog, XMLHttpRequest);
175                 }
176             });
177         } else {
178             showD(showOpt, {});
179         }
180 
181     },
182 
183     showDialog : function(showOpt, buttons, data) {
184         showOpt.buttons = $.extend(showOpt.buttons, buttons);
185         showOpt.data = $.extend({}, showOpt.data, data);
186 
187         if (showOpt.buttons == undefined || showOpt.buttons == null) {
188             showOpt.buttons = [ {
189                 icon : 'glyphicon glyphicon-ok',
190                 label : '确定',
191                 cssClass : 'btn-primary',
192                 action : function(dialogItself) {
193                     dialogItself.close();
194                 }
195             } ];
196         }
197 
198         var cont = $('<div>加载数据中,请稍后...</div>');
199         var opt = $
200                 .extend(
201                         {
202                             title : showOpt.title,
203                             message : function(dialog) {
204                                 return cont;
205                             },
206                             onshown : function(dialogRef) {
207                                 var contTmp = $('<div></div>');
208 
209                                 var response = '';
210                                 if (showOpt.templateUrl) {
211                                     $
212                                             .ajax({
213                                                 url : showOpt.templateUrl,
214                                                 async : false,
215                                                 success : function(res) {
216                                                     try {
217                                                         var t = eval("(" + res
218                                                                 + ")");
219                                                         if (t != null
220                                                                 && t.stat == 0) {
221                                                             $.FORM
222                                                                     .show_code_err(
223                                                                             null,
224                                                                             t);
225                                                             if (t.code == 1403) {
226                                                                 cont
227                                                                         .html("<div>您可能已经离线,请重新刷新网页后再试!</div>");
228                                                             }
229                                                             dialog
230                                                                     .enableButtons(false);
231                                                             return;
232 
233                                                         } else {
234                                                             response = res;
235                                                         }
236                                                     } catch (e) {
237                                                         response = res;
238                                                     }
239 
240                                                 }
241                                             });
242                                 } else if (showOpt.template) {
243                                     response = "<div>" + showOpt.template
244                                             + "</div>";
245                                 } else {
246                                     response = "<div></div>";
247                                 }
248 
249                                 if (showOpt.data != undefined) {
250                                     // 只要有数据,就用 artTemplate
251                                     // 渲染
252                                     if (showOpt.templateOption != undefined) {
253                                         if (showOpt.templateOption.helpers) {
254                                             for ( var i in showOpt.templateOption.helpers) {
255                                                 var help = showOpt.templateOption.helpers[i];
256                                                 if (help) {
257                                                     template.helper(help.name,
258                                                             help.action);
259                                                 }
260                                             }
261                                         }
262                                     }
263 
264                                     var tempRes = template.compile(response);
265                                     var dt = tempRes(showOpt.data);
266                                     cont.html(dt);
267 
268                                     if (showOpt.isReadOnly != undefined
269                                             && showOpt.isReadOnly != null
270                                             && !showOpt.isReadOnly) {
271                                         // 编辑模式可以再用js2form填充form数据
272                                         var rootNode = cont
273                                                 .find(showOpt.formId)[0];
274                                         if (rootNode && rootNode != null)
275                                             js2form(rootNode, showOpt.data);
276                                         else
277                                             js2form(cont[0], showOpt.data);
278                                     }
279                                 } else {
280                                     cont.html(contTmp[0]);
281                                 }
282 
283                                 // form 設置
284                                 var formOpt = $(showOpt.formId).getFormOpt();
285                                 if (showOpt.isReadOnly != undefined
286                                         && showOpt.isReadOnly != null) {
287 
288                                     if (showOpt.isReadOnly) {
289                                         if (formOpt.onReadonlyMode != undefined)
290                                             formOpt
291                                                     .onReadonlyMode(showOpt.data);
292                                     } else {
293                                         if (formOpt.onModifyMode != undefined)
294                                             formOpt.onModifyMode(showOpt.data);
295                                     }
296                                 } else {
297                                     if (formOpt.onCreateMode != undefined)
298                                         formOpt.onCreateMode(showOpt.data);
299                                 }
300 
301                                 if (formOpt.buttons != undefined) {
302                                     dialogRef.setButtons(formOpt.buttons);
303                                 }
304                             },
305                             draggable : true,
306                             closeByBackdrop : false,
307                             closeByKeyboard : true,
308                             buttons : showOpt.buttons
309                         }, showOpt.dialogOption);
310 
311         var dialog = BootstrapDialog.show(opt);
312         return dialog;
313     },
314     postForm : function(showOpt, dialog) {
315         dialog.setClosable(false);
316         dialog.enableButtons(false);
317 
318         var formOpt = $(showOpt.formId).getFormOpt();
319 
320         var postform = $(showOpt.formId);
321         var validator = postform.validate();
322 
323         if (formOpt.preValidDataHandler != undefined) {
324             if (formOpt.preValidDataHandler(dialog, validator) != true) {
325                 dialog.setClosable(true);
326                 dialog.enableButtons(true);
327                 return;
328             }
329         }
330 
331         // validator.form();
332         if (!postform.valid()) {
333             postform.focus();
334             $.FORM.show_stack_err_context(dialog.getModalContent(), false, {
335                 title : "提示",
336                 text : "该页面还有" + validator.numberOfInvalids() + "个字段包含错误!",
337                 type : "notice",
338                 delay : 1500,
339                 hide : true
340             });
341             dialog.setClosable(true);
342             dialog.enableButtons(true);
343             return;
344         }
345 
346         if (formOpt.preSloveDataHandler != undefined) {
347             if (formOpt.preSloveDataHandler(dialog) != true) {
348                 dialog.setClosable(true);
349                 dialog.enableButtons(true);
350                 return;
351             }
352         }
353 
354         var formData;
355 
356         if (showOpt.postType) {
357             switch (showOpt.postType) {
358             case "multipart":
359                 formData = new FormData(postform[0]);
360                 break;
361             case "form":
362                 formData = $.param(form2js(postform[0], '.', true,
363                         formOpt.formNodeCallback));
364                 break;
365             case "json":
366                 formData = JSON.stringify(form2js(postform[0], '.', true,
367                         formOpt.formNodeCallback));
368                 break;
369             default:
370                 return;
371             }
372         } else {
373             formData = form2js(postform[0], '.', true, formOpt.formNodeCallback);
374         }
375 
376         if (formOpt.prePostDataHandler != undefined) {
377             if (formOpt.prePostDataHandler(dialog, formData) != true) {
378                 dialog.setClosable(true);
379                 dialog.enableButtons(true);
380                 return;
381             }
382         }
383 
384         if (showOpt.isDebug != undefined && showOpt.isDebug) {
385             var postdata = JSON.stringify(formData);
386             alert(postdata);
387             dialog.setClosable(true);
388             dialog.enableButtons(true);
389             return;
390         }
391 
392         var sendOpt = {
393             type : "post",
394             async : false,
395             url : showOpt.postUrl,
396             data : formData,
397             dataType : "json",
398             success : function(json) {
399                 if (json.stat == 1) {
400                     dialog.close();
401                     new PNotify({
402                         title : '修改成功!',
403                         text : '信息修改成功。',
404                         type : 'success',
405                         animation : "fade",
406                         shadow : true,
407                         hide : true,
408                         delay : 2000,
409                         mobile : {
410                             swipe_dismiss : true,
411                             styling : true
412                         }
413 
414                     });
415                     if (showOpt.onPostSuccess != undefined)
416                         showOpt.onPostSuccess(json.data)
417                 } else {
418                     if (json.code != undefined) {
419                         $.FORM.show_code_err(dialog, json);
420                     } else {
421                         $.FORM.show_sys_err(dialog);
422                     }
423                 }
424 
425                 dialog.setClosable(true);
426                 dialog.enableButtons(true);
427             },
428             error : function(XMLHttpRequest, textStatus, errorThrown) {
429                 var info = "XMLHttpRequest:" + JSON.stringify(XMLHttpRequest)
430                         + " ;textStatus:" + textStatus + "; errorThrown:"
431                         + JSON.stringify(errorThrown) + "; 【" + showOpt.postUrl
432                         + "】";
433                 console.log("系统错误 【url: " + showOpt.postUrl + "】" + info);
434                 $.FORM.show_sys_err(dialog, XMLHttpRequest);
435                 dialog.setClosable(true);
436                 dialog.enableButtons(true);
437             }
438         };
439 
440         if (showOpt.postType) {
441             switch (showOpt.postType) {
442             case "multipart":
443                 sendOpt.async = false;
444                 sendOpt.cache = false;
445                 sendOpt.contentType = false;
446                 sendOpt.processData = false;
447                 break;
448             case "form":
449                 sendOpt.contentType = 'application/x-www-form-urlencoded';
450                 break;
451             case "json":
452                 sendOpt.contentType = 'application/json';
453                 break;
454             default:
455                 return;
456             }
457         }
458 
459         $.ajax(sendOpt);
460 
461     },
462     show_sys_err : function(dialog, XMLHttpRequest) {
463         var opt = {
464             title : "系统错误",
465             text : "请您联系管理员!",
466             type : "error"
467         };
468         if (dialog == undefined || dialog == null) {
469             new PNotify(opt);
470         } else {
471             $.FORM.show_stack_err_context(dialog.getModalContent(), false, opt);
472         }
473 
474     },
475     show_code_err : function(dialog, json) {
476         var opt;
477         if (json.code != undefined && json.code == 1403) {
478             $.NOTIFY.showLogin();
479             return;
480         } else if (json.errorMessages != undefined
481                 && json.errorMessages != null && json.errorMessages.length > 0) {
482             opt = {
483                 title : "错误",
484                 text : json.errorMessages[0],
485                 type : "notice",
486                 delay : 1500,
487                 hide : true
488             };
489         }
490 
491         if (dialog == undefined || dialog == null) {
492             new PNotify(opt);
493         } else {
494             $.FORM.show_stack_err_context(dialog.getModalContent(), false, opt)
495         }
496 
497     },
498     show_stack_err_context : function(context, modal, opt) {
499         var opts = !opt ? {} : opt;
500         opts.stack = modal ? {
501             "push" : "top",
502             "dir1" : "down",
503             "dir2" : "left",
504             "context" : context,
505             "modal" : true,
506             "overlay_close" : true
507         } : {
508             "push" : "top",
509             "dir1" : "down",
510             "dir2" : "left",
511             "context" : context
512         };
513         opts.addclass = "stack-modal";
514         new PNotify(opts);
515     }
516 }