zoukankan      html  css  js  c++  java
  • 用于辅助在 bootstrapdialog 中的表现:appjquerydialog.js Cryst

      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 }
  • 相关阅读:
    UISlider
    App两个页面之间的正反传值方法
    UIImageview的简单运用
    UIPickerview 基本使用
    IOS开发中用开关(UISwitch)跟滑块(UISlider)控制手机屏幕的亮度
    冒泡排序
    简单抽屉实现
    iOS 模态视图,视图之间的切换
    UIScrollView和UIPageControl的使用(实现图片的循环滚动)
    iOS中UIPickerView实现省/市连动
  • 原文地址:https://www.cnblogs.com/cryst/p/5842953.html
Copyright © 2011-2022 走看看