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. }

用于辅助在 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. Java学习笔记之static

    1.static可以用于修饰成员变量.方法以及块,并不会改变类中成员的权限修饰,如:private修饰的成员变量,类外只能类名或非私有方法调用,而不能使用对象名调用. 2.static方法和成员变量, ...

  2. js操作select和option

    1.动态创建select function createSelect(){ var mySelect = document.createElement_x("select"); m ...

  3. 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 ...

  4. linux 查看磁盘、文件夹、文件大小(df du)

    du 查看文件夹大小 1.查看当前文件夹中所有文件夹及其子文件夹的大小,注意是文件夹大小,不是文件 # du -h -rw-r--r-- 1 root root 82785865 6月 9 15:53 ...

  5. IT项目各阶段管理

  6. Vector2.Angle 的 bug

    获取角度 ,官方提供了 Vector2.Angle 来得值,他的值是在 0  ,180之间 原始代码是 public static float Angle(Vector3 from, Vector3 ...

  7. Python实现删除目录下相同文件

    让我们来分析一下这个问题:首先,文件个数非常多,手工查找是不现实的,再说,单凭我们肉眼,在几千张图片或文件里面找到完全相同的难度也是很大的.所以要用程序实现.那么用程序怎么实现呢?根据什么判断两个文件 ...

  8. C#,js数据排序及其操作

    List<int> listint=new List<int>{2,1,7,3,8,5,4,6};listint.Sort((x, y) => x - y); var a ...

  9. java 常见异常总结

    异常1:java.util.NoSuchElementException: No line found 原因:Java 是顺序执行的 你执行到.close() 后就代表 你关闭了 流,你再去调用已经被 ...

  10. Linux学习 -- Shell基础 -- Bash基本功能

    历史命令 history -c   clear -w   写入 ~/.bash_history 默认保存1000条, 可在/etc/profile中修改 调用 Tab补全 命令.目录.文件 命令别名 ...