require-form.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. define(['jquery', 'bootstrap', 'backend', 'toastr', 'upload', 'validator'], function ($, undefined, Backend, Toastr, Upload, Validator) {
  2. var Form = {
  3. config: {
  4. },
  5. api: {
  6. submit: function (form, onBeforeSubmit, onAfterSubmit) {
  7. if (form.size() == 0)
  8. return Toastr.error("表单未初始化完成,无法提交");
  9. //提交前事件
  10. var beforeSubmit = form.data("before-submit");
  11. //元素绑定函数
  12. if (beforeSubmit && typeof Form.api.custom[beforeSubmit] == 'function') {
  13. if (!Form.api.custom[beforeSubmit].call(form)) {
  14. return false;
  15. }
  16. }
  17. //自定义函数
  18. if (typeof onBeforeSubmit == 'function') {
  19. if (!onBeforeSubmit.call(form)) {
  20. return false;
  21. }
  22. }
  23. var type = form.attr("method").toUpperCase();
  24. type = type && (type == 'GET' || type == 'POST') ? type : 'GET';
  25. url = form.attr("action");
  26. url = url ? url : location.href;
  27. $.ajax({
  28. type: type,
  29. url: url,
  30. data: form.serialize(),
  31. dataType: 'json',
  32. success: function (ret) {
  33. if (ret.hasOwnProperty("code")) {
  34. var data = ret.hasOwnProperty("data") && ret.data != "" ? ret.data : null;
  35. var msg = ret.hasOwnProperty("msg") && ret.msg != "" ? ret.msg : "";
  36. if (ret.code === 1) {
  37. $('.form-group', form).removeClass('has-feedback has-success has-error');
  38. //成功提交后事件
  39. var afterSubmit = form.data("after-submit");
  40. //元素绑定函数
  41. if (afterSubmit && typeof Form.api.custom[afterSubmit] == 'function') {
  42. if (!Form.api.custom[afterSubmit].call(form, data)) {
  43. return false;
  44. }
  45. }
  46. //自定义函数
  47. if (typeof onAfterSubmit == 'function') {
  48. if (!onAfterSubmit.call(form, data)) {
  49. return false;
  50. }
  51. }
  52. Toastr.success(msg ? msg : __('Operation completed'));
  53. } else {
  54. Toastr.error(msg ? msg : __('Operation failed'));
  55. }
  56. } else {
  57. Toastr.error(__('Unknown data format'));
  58. }
  59. }, error: function () {
  60. Toastr.error(__('Network error'));
  61. }, complete: function (e) {
  62. }
  63. });
  64. return false;
  65. },
  66. bindevent: function (form, onBeforeSubmit, onAfterSubmit) {
  67. form.validator({
  68. validClass: 'has-success',
  69. invalidClass: 'has-error',
  70. bindClassTo: '.form-group',
  71. formClass: 'n-default n-bootstrap',
  72. msgClass: 'n-right',
  73. stopOnError: true,
  74. valid: function (ret) {
  75. //验证通过提交表单
  76. Form.api.submit(form, onBeforeSubmit, function (data) {
  77. if (typeof onAfterSubmit == 'function') {
  78. if (!onAfterSubmit.call(form, data)) {
  79. return false;
  80. }
  81. }
  82. //提示及关闭当前窗口
  83. parent.Toastr.success(__('Operation completed'));
  84. parent.$(".btn-refresh").trigger("click");
  85. var index = parent.Layer.getFrameIndex(window.name);
  86. parent.Layer.close(index);
  87. });
  88. return false;
  89. }
  90. });
  91. //绑定select元素事件
  92. if ($(".selectpicker", form).size() > 0) {
  93. require(['bootstrap-select'], function () {
  94. $('.selectpicker', form).selectpicker();
  95. });
  96. }
  97. //绑定cxselect元素事件
  98. if ($("[data-toggle='cxselect']").size() > 0) {
  99. require(['cxselect'], function () {
  100. $.cxSelect.defaults.jsonName = 'name';
  101. $.cxSelect.defaults.jsonValue = 'value';
  102. $.cxSelect.defaults.jsonSpace = 'data';
  103. $("[data-toggle='cxselect']").cxSelect();
  104. });
  105. }
  106. if ($(".typeahead").size() > 0 || $(".tagsinput").size() > 0) {
  107. require(['bloodhound'], function () {
  108. var remotesource = function (input) {
  109. return new Bloodhound({
  110. datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  111. queryTokenizer: Bloodhound.tokenizers.whitespace,
  112. remote: {
  113. url: 'ajax/typeahead?search=%QUERY&field=' + $(input).attr("name"),
  114. wildcard: '%QUERY',
  115. transform: function (ret) {
  116. return ret.data.searchlist;
  117. }
  118. }
  119. });
  120. };
  121. //绑定typeahead事件
  122. if ($(".typeahead", form).size() > 0) {
  123. require(['typeahead'], function () {
  124. $(".typeahead", form).each(function () {
  125. $(this).typeahead({
  126. hint: true,
  127. highlight: true,
  128. minLength: 0
  129. }, {
  130. name: 'typeahead',
  131. limit: 20,
  132. displayKey: 'id',
  133. source: remotesource(this),
  134. templates: {
  135. empty: '<li class="notfound">' + __('No matches found') + '</li>',
  136. suggestion: function (item) {
  137. return '<li>' + item.name + '</li>';
  138. }
  139. }
  140. });
  141. });
  142. });
  143. }
  144. //绑定tagsinput事件
  145. if ($(".tagsinput", form).size() > 0) {
  146. require(['bootstrap-tagsinput'], function () {
  147. $('.tagsinput', form).each(function () {
  148. $(this).tagsinput({
  149. freeInput: false,
  150. typeaheadjs: {
  151. name: 'tagsinput',
  152. limit: 20,
  153. displayKey: 'name',
  154. valueKey: 'id',
  155. source: remotesource(this),
  156. templates: {
  157. empty: '<li class="notfound">' + __('No matches found') + '</li>',
  158. suggestion: function (item) {
  159. return '<li>' + item.name + '</li>';
  160. }
  161. }
  162. }
  163. });
  164. });
  165. $('.bootstrap-tagsinput .twitter-typeahead').css('display', 'inline');
  166. });
  167. }
  168. });
  169. }
  170. //绑定日期时间元素事件
  171. if ($(".datetimepicker", form).size() > 0) {
  172. require(['bootstrap-datetimepicker'], function () {
  173. $('.datetimepicker', form).parent().css('position', 'relative');
  174. $('.datetimepicker', form)
  175. .datetimepicker({
  176. format: 'YYYY-MM-DD HH:mm:ss',
  177. icons: {
  178. time: 'fa fa-clock-o',
  179. date: 'fa fa-calendar',
  180. up: 'fa fa-chevron-up',
  181. down: 'fa fa-chevron-down',
  182. previous: 'fa fa-chevron-left',
  183. next: 'fa fa-chevron-right',
  184. today: 'fa fa-history',
  185. clear: 'fa fa-trash',
  186. close: 'fa fa-remove'
  187. },
  188. showTodayButton: true,
  189. showClose: true
  190. });
  191. });
  192. }
  193. //绑定summernote事件
  194. if ($(".summernote", form).size() > 0) {
  195. require(['summernote'], function () {
  196. $(".summernote", form).summernote({
  197. height: 250,
  198. lang: 'zh-CN',
  199. dialogsInBody: true,
  200. callbacks: {
  201. onChange: function (contents) {
  202. $(this).val(contents);
  203. $(this).trigger('change');
  204. },
  205. onInit: function () {
  206. },
  207. onImageUpload: function (files) {
  208. var that = this;
  209. //依次上传图片
  210. for (var i = 0; i < files.length; i++) {
  211. Upload.api.send(files[i], function (data) {
  212. var url = Config.upload.cdnurl + data.url;
  213. $(that).summernote("insertImage", url, 'filename');
  214. });
  215. }
  216. }
  217. }
  218. });
  219. });
  220. }
  221. //绑定plupload上传元素事件
  222. if ($(".plupload", form).size() > 0) {
  223. Upload.api.plupload();
  224. }
  225. },
  226. custom: {}
  227. },
  228. };
  229. return Form;
  230. });