easyui DateTimeBox OK

时间:2021-03-29 07:20:41

一、datetimebox   ok按钮没有点击事件,但是可以通过onSelect事件模拟出“点击了ok按钮一样的效果”,我的代码:
关键:
0,理解DateTimeBox控件,这个控件是由DateBox+TimeSpinner这2个控件组成的,而DateBox又继承自combo控件。
1,使用setText方法,设置控件文本框的内容,这个方法是DateTimeBox从combo控件中继承过来的。不能使用setValue方法,因
为这个方法是从DateBox继承过来的,但是DateTimeBox控件并没有重写这个方法,由于DateTimeBox还包含"时分秒",所以无法使
用这个DateBox的方法。
2,使用spinner方法,获取“时分秒”信息,这个方法返回DateTimeBox中包含的TimeSpinner控件,使用TimeSpinner控件的getValue方法可以获得时间信息
3,使用onSelect方法,获取“日期”信息,onSelect:function(date){},其中date是事件触发时选中的日期,是js的Date类型数据
4,使用hidePanel方法,把下拉日期面板关闭,该方法也是继承自combo控件
容易看懂的代码:
$('#TextStartTime').datetimebox({
   showSeconds:false,
   required:true,
   onSelect:function(date){
var time=$('#TextStartTime').datetimebox('spinner').spinner('getValue');
$('#TextStartTime').datetimebox('setText',date.getFullYear()+'-'+ (date.getMonth()+1) +'-'+date.getDate()+' '+ time);
$('#TextStartTime').datetimebox('hidePanel');
   }
});

让日期2014-1-2变成2014-01-02格式的代码:
$('#TextStartTime').datetimebox({
   showSeconds:false,
   required:true,
   onSelect:function(date){
var time=$('#TextStartTime').datetimebox('spinner').spinner('getValue');

$('#TextStartTime').datetimebox('setText',date.getFullYear()+'-'+ ((date.getMonth()+1)<10 ? ('0'+(date.getMonth()+1)) : (date.getMonth()+1))+'-'+((date.getDate())<10 ? ('0'+(date.getDate())) : (date.getDate()))+' '+time);
$('#TextStartTime').datetimebox('hidePanel');
   }
});

二、日期格式化

var sysformat = function (time, format) {
            var t = new Date(time);
            var tf = function (i) { return (i < 10 ? '0' : '') + i };
            return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
                switch (a) {
                    case 'yyyy':
                        return tf(t.getFullYear());
                        break;
                    case 'MM':
                        return tf(t.getMonth() + 1);
                        break;
                    case 'mm':
                        return tf(t.getMinutes());
                        break;
                    case 'dd':
                        return tf(t.getDate());
                        break;
                    case 'HH':
                        return tf(t.getHours());
                        break;
                    case 'ss':
                        return tf(t.getSeconds());
                        break;
                }
            })
        }

三、扩展

EasyUI扩展方法:

1、我想指定textarea的行,但editor:{type:'textarea', options: {rows:'4'}}这样写不行。请问大家怎么配置才是指定行的啊?

配置Textarea不可拖动变大变小:

 

只能自己扩展 textarea 才能实现,配置不用修改,直接扩展就行

  1. jQuery.extend(jQuery.fn.datagrid.defaults.editors, {
  2. combotree: {
  3. init: function(container, options){
  4. var editor = jQuery('<input type="text">').appendTo(container);
  5. editor.combotree(options);
  6. return editor;
  7. },
  8. destroy: function(target){
  9. jQuery(target).combotree('destroy');
  10. },
  11. getValue: function(target){
  12. var temp = jQuery(target).combotree('getValues');
  13. //alert(temp);
  14. return temp.join(',');
  15. },
  16. setValue: function(target, value){
  17. var temp = value.split(',');
  18. //alert(temp);
  19. jQuery(target).combotree('setValues', temp);
  20. },
  21. resize: function(target, width){
  22. jQuery(target).combotree('resize', width);
  23. }
  24. },
  25. textarea: {
  26. init : function(container, options) {
  27. var input = $(
  28. '<textarea class="datagrid-editable-input" style="resize:none;"></textarea>')
  29. .appendTo(container);
  30. return input;
  31. },
  32. getValue : function(target) {
  33. return $(target).val();
  34. },
  35. setValue : function(target, value) {
  36. $(target).val(value);
  37. },
  38. resize : function(target, width) {
  39. var input = $(target);
  40. if ($.boxModel == true) {
  41. input.width(width - (input.outerWidth() - input.width()));
  42. } else {
  43. input.width(width);
  44. }
  45. }
  46. }
  47. });

==========================================================================================

扩展jQuery easyui datagrid增加动态改变列编辑的类型

  1. $.extend($.fn.datagrid.methods, {
  2. addEditor : function(jq, param) {
  3. if (param instanceof Array) {
  4. $.each(param, function(index, item) {
  5. var e = $(jq).datagrid('getColumnOption', item.field);
  6. e.editor = item.editor;
  7. });
  8. } else {
  9. var e = $(jq).datagrid('getColumnOption', param.field);
  10. e.editor = param.editor;
  11. }
  12. },
  13. removeEditor : function(jq, param) {
  14. if (param instanceof Array) {
  15. $.each(param, function(index, item) {
  16. var e = $(jq).datagrid('getColumnOption', item);
  17. e.editor = {};
  18. });
  19. } else {
  20. var e = $(jq).datagrid('getColumnOption', param);
  21. e.editor = {};
  22. }
  23. }
  24. });

使用方式:

为password字段添加一个editor

  1. $("#gridId").datagrid('addEditor', {
  2. field : 'password',
  3. editor : {
  4. type : 'validatebox',
  5. options : {
  6. required : true
  7. }
  8. }
  9. });

删除password的editor

$("#gridid").datagrid('removeEditor', 'password');

注:两个方法,第二个参数都可以传递数组。

==========================================================================================

Datagrid动态设置列标题的的扩展方法

在使用datagrid时候有时候需要动态的改变一下某一列的标题。但datagrid并没有提供这一方法,一下是一个扩展的方法可以供大家使用,希望对大家能有所帮助。

扩展方法如下:

  1. $.extend($.fn.datagrid.methods, {
  2. setColumnTitle: function(jq, option){
  3. if(option.field){
  4. return jq.each(function(){
  5. var $panel = $(this).datagrid("getPanel");
  6. var $field = $('td[field='+option.field+']',$panel);
  7. if($field.length){
  8. var $span = $("span",$field).eq(0);
  9. $span.html(option.text);
  10. }
  11. });
  12. }
  13. return jq;
  14. }
  15. });

调用方法如下:

  1. $("#dt").datagrid("setColumnTitle",{field:'productid',text:'newTitle});

==========================================================================================

其他:

  1. $.extend($.messager.defaults,{
  2. ok:"确定",
  3. cancel:"取消"
  4. });
  5. EASYUI TAB:
  6. var ctab = $('#xmlTab').tabs('getTab', 'Response XML').panel('options').tab;
  7. ctab.hide();//隐藏卡片
  8. 解决思路:在进入行编辑状态后,获取combobox的编辑器并添加onChange事件,示例代码如下:
  9. var amount = $('#tt').datagrid('getEditor', {index:editLineIndex,field:'amount'}).target;   // 个数
  10. var sum = $('#tt').datagrid('getEditor', {index:editLineIndex,field:'sum'}).target; // 总数
  11. amount.combobox({
  12. onChange:function(id){
  13. sum.val(id*100);    // 假设是text编辑类型
  14. }
  15. });

baseui-all.min.js中方法使用:

其中方法如图:

  1. var __YUIToolbarItems = {
  2. getQueryItem: function() {
  3. return {
  4. method: "do_query",
  5. iconCls: "queryAction ope-search",
  6. text: "查询",
  7. enable: true
  8. }
  9. },
  10. getAddItem: function() {
  11. return {
  12. method: "do_add",
  13. iconCls: "addAction ope-add",
  14. text: "新增",
  15. enable: true
  16. }
  17. },
  18. getDelItem: function() {
  19. return {
  20. method: "do_del",
  21. iconCls: "delAction ope-remove",
  22. text: "删除",
  23. enable: true
  24. }
  25. }
  26. ..
  27. };

使用:

  1. $obj.datagrid({
  2. url : _root+'/generic/query?__SERVICE_NAME=networkService',
  3. idField:'id',
  4. queryParams: {
  5. networkId: networkId
  6. },
  7. singleSelect:true,
  8. showToolbar:true,
  9. toolbar: [
  10. //正常方法
  11. {method:'do_add',iconCls: 'ope-add',text:'新增'},
  12. //公用快捷方法
  13. __YUIToolbarItems.getAddItem(),
  14. __YUIToolbarItems.getSaveItem() ,
  15. __YUIToolbarItems.getCancelItem()
  16. ],
  17. ..

方便抽出公用按钮。

========================================

jUtil.js:

  1. /**
  2. * easyui扩展/常用的方法
  3. *
  4. * @author lk1312
  5. */
  6. // 定义全局对象
  7. var yxui = $.extend({}, yxui);
  8. $.parser.auto = false;
  9. $(function() {
  10. $.messager.progress({
  11. text : '数据加载中....',
  12. interval : 100
  13. });
  14. $.parser.parse(window.document);
  15. window.setTimeout(function() {
  16. $.messager.progress('close');
  17. if (self != parent) {
  18. window.setTimeout(function() {
  19. try {
  20. parent.$.messager.progress('close');
  21. } catch (e) {
  22. }
  23. }, 500);
  24. }
  25. }, 1);
  26. $.parser.auto = true;
  27. });
  28. $.fn.panel.defaults.loadingMessage = '数据加载中....';
  29. $.fn.datagrid.defaults.loadMsg = '数据加载中....';
  30. // 获得根路径 rootBasePath rootPath
  31. yxui.rootBasePath = function() {
  32. var curWwwPath = window.document.location.href;
  33. var pathName = window.document.location.pathname;
  34. var pos = curWwwPath.indexOf(pathName);
  35. var localhostPaht = curWwwPath.substring(0, pos);
  36. var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
  37. return (localhostPaht + projectName);
  38. };
  39. yxui.rootPath = function() {
  40. var pathName = window.document.location.pathname;
  41. return pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
  42. };
  43. // 格式化字符串 formatString
  44. yxui.formatString = function(str) {
  45. for (var i = 0; i < arguments.length - 1; i++) {
  46. str = str.replace("{" + i + "}", arguments[i + 1]);
  47. }
  48. return str;
  49. };
  50. // 更换主题 changeTheme
  51. yxui.changeTheme = function(themeName) {
  52. var $yxuiTheme = $('#yxuiTheme');
  53. var url = $yxuiTheme.attr('href');
  54. var href = url.substring(0, url.indexOf('themes')) + 'themes/' + themeName + '/easyui.css';
  55. $yxuiTheme.attr('href', href);
  56. var $iframe = $('iframe');
  57. if ($iframe.length > 0) {
  58. for (var i = 0; i < $iframe.length; i++) {
  59. var ifr = $iframe[i];
  60. $(ifr).contents().find('#easyuiTheme').attr('href', href);
  61. }
  62. }
  63. $.cookie('yxuiTheme', themeName, {
  64. expires : 7
  65. });
  66. };
  67. // 将form表单元素的值序列化成对象
  68. yxui.serializeObject = function(form) {
  69. var o = {};
  70. $.each(form.serializeArray(), function(index) {
  71. if (o[this['name']]) {
  72. o[this['name']] = o[this['name']] + "," + this['value'];
  73. } else {
  74. o[this['name']] = this['value'];
  75. }
  76. });
  77. return o;
  78. };
  79. // 操作权限控制 operId
  80. yxui.operId = function(_this) {
  81. $("#_operId").val($(_this).attr("_operId"));
  82. $("#_resOperId").val($(_this).attr("_resOperId"));
  83. $("#_resOperKey").val($(_this).attr("_resOperKey"));
  84. // console.info("set->" + $("#_operId").val());
  85. };
  86. // form提交 formSubmit
  87. yxui.formSubmit = function(_datagrid, _dialog, _form, _url, _callbak) {
  88. var _arg = '_menuId=' + $("#_menuId").val() + '&_operId=' + $("#_operId").val() + '&_resOperId=' + $("#_resOperId").val() + '&_resOperKey=' + $("#_resOperKey").val();
  89. _url = yxui.refreshUrlLink(_url, _arg);
  90. if (_form.form('validate')) {
  91. _form.form('submit', {
  92. url : _url,
  93. success : function(data) {
  94. _callbak(data, _datagrid, _dialog, _form, _url);
  95. }
  96. })
  97. }
  98. $("#_operId").val('');
  99. };
  100. // ajax提交 ajaxSubmit
  101. yxui.ajaxSubmit = function(_datagrid, _dialog, _form, _url, _data, _callbak) {
  102. // console.info("ajax get->" + $("#_operId").val());
  103. _data._operId = $("#_operId").val();
  104. _data._resOperId = $("#_resOperId").val();
  105. _data._resOperKey = $("#_resOperKey").val();
  106. $.ajax({
  107. url : _url,
  108. type : 'post',
  109. data : _data,
  110. dataType : 'json',
  111. cache : false,
  112. success : function(response) {
  113. _callbak(response, _datagrid, _dialog, _form, _url, _data);
  114. }
  115. });
  116. };
  117. // refreshUrlLink
  118. yxui.refreshUrlLink = function(_url, _arg) {
  119. var index = _url.indexOf('?');
  120. var length = _url.length;
  121. if (index < 0) {
  122. _url = _url + '?' + _arg;
  123. } else if (index == length - 1) {
  124. _url = _url + _arg;
  125. } else {
  126. _url = _url.substring(0, index + 1) + _arg + '&' + _url.substring(index + 1, length);
  127. }
  128. return _url;
  129. };
  130. // dotoHtml
  131. yxui.dotoHtml = function(tos) {
  132. var returnHtml = $('#rowOperation').html();
  133. if (null != returnHtml) {
  134. var maxArgsNumb = $('#_maxArgsNumb').val();
  135. if (maxArgsNumb == 0) {
  136. return returnHtml;
  137. } else {
  138. for (var i = 0; i < maxArgsNumb; i++) {
  139. returnHtml = returnHtml.replace(new RegExp("'#arg" + i + "'", "g"), typeof(tos[i]) == 'undefined' ? 'this' : tos[i]);
  140. }
  141. return returnHtml;
  142. }
  143. } else {
  144. return "";
  145. }
  146. }
  147. // dotoHtmlById
  148. yxui.dotoHtmlById = function(id, tos) {
  149. var returnHtml = $('#' + id).html();
  150. if (null != returnHtml) {
  151. var maxArgsNumb = tos.length;
  152. for (var i = 0; i < maxArgsNumb; i++) {
  153. returnHtml = returnHtml.replace(new RegExp("'#arg" + i + "'", "g"), typeof(tos[i]) == 'undefined' ? 'this' : tos[i]);
  154. }
  155. return returnHtml;
  156. } else {
  157. return "";
  158. }
  159. }
  160. // dotoDiyHtml
  161. yxui.dotoDiyHtml = function(returnHtml, tos, maxArgsNumb) {
  162. if (null != returnHtml) {
  163. if (null == maxArgsNumb || maxArgsNumb == 0) {
  164. return returnHtml;
  165. } else {
  166. for (var i = 0; i < maxArgsNumb; i++) {
  167. returnHtml = returnHtml.replace(new RegExp("'#arg" + i + "'", "g"), typeof(tos[i]) == 'undefined' ? 'this' : tos[i]);
  168. }
  169. return returnHtml;
  170. }
  171. } else {
  172. return "";
  173. }
  174. }
  175. // replaceAll
  176. yxui.replaceAll = function(_str, _from, _to) {
  177. if (null != _str) {
  178. return _str.replace(new RegExp(_from, "g"), _to);
  179. } else {
  180. return "";
  181. }
  182. }
  183. // getRequestArg
  184. yxui.getRequestArg = function() {
  185. var _url = location.search;
  186. var returnObject = {};
  187. var index = _url.indexOf("?");
  188. if (index != -1) {
  189. var str = _url.substr(index + 1);
  190. strs = str.split("&");
  191. for (var i = 0; i < strs.length; i++) {
  192. returnObject[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
  193. }
  194. }
  195. return returnObject;
  196. }
  197. // xui.getUrlArg
  198. yxui.getUrlArg = function(_url) {
  199. var index = _url.indexOf("?");
  200. if (index != -1) {
  201. var returnObject = {};
  202. var str = _url.substr(index + 1);
  203. strs = str.split("&");
  204. for (var i = 0; i < strs.length; i++) {
  205. returnObject[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
  206. }
  207. return returnObject;
  208. }
  209. return null;
  210. }
  211. function getrequest() {
  212. var url = location.search; // 获取url中"?"符后的字串
  213. // alert(url.indexOf("?"))
  214. var therequest = {};
  215. if (url.indexOf("?") != -1) {
  216. var str = url.substr(1);
  217. // alert(str)
  218. strs = str.split("&");
  219. for (var i = 0; i < strs.length; i++) {
  220. therequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
  221. }
  222. }
  223. return therequest;
  224. }
  225. /**
  226. * 扩展treegrid diyload treegrid查询功能
  227. */
  228. $.extend($.fn.treegrid.methods, {
  229. diyload : function(jq, param) {
  230. return jq.each(function() {
  231. var opts = $(this).treegrid("options");
  232. diyRequest(this, param);
  233. });
  234. }
  235. });
  236. function diyRequest(jq, param) {
  237. var opts = $.data(jq, "treegrid").options;
  238. if (param) {
  239. opts.queryParams = param;
  240. }
  241. if (!opts.url) {
  242. return;
  243. }
  244. var param = $.extend({}, opts.queryParams);
  245. if (opts.onBeforeLoad.call(jq, param) == false) {
  246. return;
  247. }
  248. setTimeout(function() {
  249. doRequest();
  250. }, 0);
  251. function doRequest() {
  252. $.ajax({
  253. type : opts.method,
  254. url : opts.url,
  255. data : param,
  256. dataType : "json",
  257. success : function(data) {
  258. $(jq).treegrid('loadData', data)
  259. },
  260. error : function() {
  261. if (opts.onLoadError) {
  262. opts.onLoadError.apply(jq, arguments);
  263. }
  264. }
  265. });
  266. }
  267. }
  268. /**
  269. * 扩展tree getCheckedExt 获得选中节点+实心节点 getSolidExt 获取实心节点
  270. */
  271. $.extend($.fn.tree.methods, {
  272. getCheckedExt : function(jq) {
  273. var checked = [];
  274. var checkbox2 = $(jq).find("span.tree-checkbox1,span.tree-checkbox2").parent();
  275. $.each(checkbox2, function() {
  276. var thisData = {
  277. target : this,
  278. "checked" : true
  279. };
  280. var node = $.extend({}, $.data(this, "tree-node"), thisData);
  281. checked.push(node);
  282. });
  283. return checked;
  284. },
  285. getSolidExt : function(jq) {
  286. var checked = [];
  287. var checkbox2 = $(jq).find("span.tree-checkbox2").parent();
  288. $.each(checkbox2, function() {
  289. var node = $.extend({}, $.data(this, "tree-node"), {
  290. target : this
  291. });
  292. checked.push(node);
  293. });
  294. return checked;
  295. }
  296. });
  297. /**
  298. * 扩展datagrid,添加动态增加或删除Editor的方法
  299. */
  300. $.extend($.fn.datagrid.methods, {
  301. addEditor : function(jq, param) {
  302. if (param instanceof Array) {
  303. $.each(param, function(index, item) {
  304. var e = $(jq).datagrid('getColumnOption', item.field);
  305. e.editor = item.editor;
  306. });
  307. } else {
  308. var e = $(jq).datagrid('getColumnOption', param.field);
  309. e.editor = param.editor;
  310. }
  311. },
  312. removeEditor : function(jq, param) {
  313. if (param instanceof Array) {
  314. $.each(param, function(index, item) {
  315. var e = $(jq).datagrid('getColumnOption', item);
  316. e.editor = {};
  317. });
  318. } else {
  319. var e = $(jq).datagrid('getColumnOption', param);
  320. e.editor = {};
  321. }
  322. }
  323. });
  324. /**
  325. * 扩展datagrid editor 增加带复选框的下拉树/增加日期时间组件/增加多选combobox组件
  326. */
  327. $.extend($.fn.datagrid.defaults.editors, {
  328. combocheckboxtree : {
  329. init : function(container, options) {
  330. var editor = $('<input />').appendTo(container);
  331. options.multiple = true;
  332. editor.combotree(options);
  333. return editor;
  334. },
  335. destroy : function(target) {
  336. $(target).combotree('destroy');
  337. },
  338. getValue : function(target) {
  339. return $(target).combotree('getValues').join(',');
  340. },
  341. setValue : function(target, value) {
  342. $(target).combotree('setValues', sy.getList(value));
  343. },
  344. resize : function(target, width) {
  345. $(target).combotree('resize', width);
  346. }
  347. },
  348. datetimebox : {
  349. init : function(container, options) {
  350. var editor = $('<input />').appendTo(container);
  351. editor.datetimebox(options);
  352. return editor;
  353. },
  354. destroy : function(target) {
  355. $(target).datetimebox('destroy');
  356. },
  357. getValue : function(target) {
  358. return $(target).datetimebox('getValue');
  359. },
  360. setValue : function(target, value) {
  361. $(target).datetimebox('setValue', value);
  362. },
  363. resize : function(target, width) {
  364. $(target).datetimebox('resize', width);
  365. }
  366. },
  367. multiplecombobox : {
  368. init : function(container, options) {
  369. var editor = $('<input />').appendTo(container);
  370. options.multiple = true;
  371. editor.combobox(options);
  372. return editor;
  373. },
  374. destroy : function(target) {
  375. $(target).combobox('destroy');
  376. },
  377. getValue : function(target) {
  378. return $(target).combobox('getValues').join(',');
  379. },
  380. setValue : function(target, value) {
  381. $(target).combobox('setValues', sy.getList(value));
  382. },
  383. resize : function(target, width) {
  384. $(target).combobox('resize', width);
  385. }
  386. }
  387. });
  388. /**
  389. * 扩展 datagrid/treegrid 增加表头菜单,用于显示或隐藏列,注意:冻结列不在此菜单中
  390. *
  391. * @param e
  392. * @param field
  393. */
  394. var createGridHeaderContextMenu = function(e, field) {
  395. e.preventDefault();
  396. var grid = $(this);/* grid本身 */
  397. var headerContextMenu = this.headerContextMenu;/* grid上的列头菜单对象 */
  398. if (!headerContextMenu) {
  399. var tmenu = $('<div style="width:150px;"></div>').appendTo('body');
  400. var fields = grid.datagrid('getColumnFields');
  401. for (var i = 0; i < fields.length; i++) {
  402. var fildOption = grid.datagrid('getColumnOption', fields[i]);
  403. if (!fildOption.hidden) {
  404. $('<div iconCls="icon-ok" field="' + fields[i] + '"/>').html(fildOption.title).appendTo(tmenu);
  405. } else {
  406. $('<div iconCls="icon-empty" field="' + fields[i] + '"/>').html(fildOption.title).appendTo(tmenu);
  407. }
  408. }
  409. headerContextMenu = this.headerContextMenu = tmenu.menu({
  410. onClick : function(item) {
  411. var field = $(item.target).attr('field');
  412. if (item.iconCls == 'icon-ok') {
  413. grid.datagrid('hideColumn', field);
  414. $(this).menu('setIcon', {
  415. target : item.target,
  416. iconCls : 'icon-empty'
  417. });
  418. } else {
  419. grid.datagrid('showColumn', field);
  420. $(this).menu('setIcon', {
  421. target : item.target,
  422. iconCls : 'icon-ok'
  423. });
  424. }
  425. }
  426. });
  427. }
  428. headerContextMenu.menu('show', {
  429. left : e.pageX,
  430. top : e.pageY
  431. });
  432. };
  433. $.fn.datagrid.defaults.onHeaderContextMenu = createGridHeaderContextMenu;
  434. $.fn.treegrid.defaults.onHeaderContextMenu = createGridHeaderContextMenu;
  435. /**
  436. * 扩展 用于datagrid/treegrid/tree/combogrid/combobox/form加载数据出错时的操作
  437. *
  438. * @param XMLHttpRequest
  439. */
  440. var easyuiErrorFunction = function(XMLHttpRequest) {
  441. $.messager.progress('close');
  442. $.messager.alert('错误', XMLHttpRequest.responseText);
  443. };
  444. $.fn.datagrid.defaults.onLoadError = easyuiErrorFunction;
  445. $.fn.treegrid.defaults.onLoadError = easyuiErrorFunction;
  446. $.fn.tree.defaults.onLoadError = easyuiErrorFunction;
  447. $.fn.combogrid.defaults.onLoadError = easyuiErrorFunction;
  448. $.fn.combobox.defaults.onLoadError = easyuiErrorFunction;
  449. $.fn.form.defaults.onLoadError = easyuiErrorFunction;
  450. /**
  451. * 防止panel/window/dialog组件超出浏览器边界
  452. *
  453. * @param left
  454. * @param top
  455. */
  456. var easyuiPanelOnMove = function(left, top) {
  457. var l = left;
  458. var t = top;
  459. if (l < 1) {
  460. l = 1;
  461. }
  462. if (t < 1) {
  463. t = 1;
  464. }
  465. var width = parseInt($(this).parent().css('width')) + 14;
  466. var height = parseInt($(this).parent().css('height')) + 14;
  467. var right = l + width;
  468. var buttom = t + height;
  469. var browserWidth = $(window).width();
  470. var browserHeight = $(window).height();
  471. if (right > browserWidth) {
  472. l = browserWidth - width;
  473. }
  474. if (buttom > browserHeight) {
  475. t = browserHeight - height;
  476. }
  477. $(this).parent().css({/* 修正面板位置 */
  478. left : l,
  479. top : t
  480. });
  481. };
  482. $.fn.dialog.defaults.onMove = easyuiPanelOnMove;
  483. $.fn.window.defaults.onMove = easyuiPanelOnMove;
  484. $.fn.panel.defaults.onMove = easyuiPanelOnMove;
  485. /**
  486. * 扩展easyui的validator插件rules,支持更多类型验证
  487. */
  488. $.extend($.fn.validatebox.defaults.rules, {
  489. minLength : { // 判断最小长度
  490. validator : function(value, param) {
  491. return value.length >= param[0];
  492. },
  493. message : '最少输入 {0} 个字符'
  494. },
  495. length : { // 长度
  496. validator : function(value, param) {
  497. var len = $.trim(value).length;
  498. return len >= param[0] && len <= param[1];
  499. },
  500. message : "输入内容长度必须介于{0}和{1}之间"
  501. },
  502. phone : {// 验证电话号码
  503. validator : function(value) {
  504. return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
  505. },
  506. message : '格式不正确,请使用下面格式:020-88888888'
  507. },
  508. mobile : {// 验证手机号码
  509. validator : function(value) {
  510. return /^(13|15|18)\d{9}$/i.test(value);
  511. },
  512. message : '手机号码格式不正确'
  513. },
  514. phoneAndMobile : {// 电话号码或手机号码
  515. validator : function(value) {
  516. return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value) || /^(13|15|18)\d{9}$/i.test(value);
  517. },
  518. message : '电话号码或手机号码格式不正确'
  519. },
  520. idcard : {// 验证身份证
  521. validator : function(value) {
  522. return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value) || /^\d{18}(\d{2}[A-Za-z0-9])?$/i.test(value);
  523. },
  524. message : '身份证号码格式不正确'
  525. },
  526. intOrFloat : {// 验证整数或小数
  527. validator : function(value) {
  528. return /^\d+(\.\d+)?$/i.test(value);
  529. },
  530. message : '请输入数字,并确保格式正确'
  531. },
  532. currency : {// 验证货币
  533. validator : function(value) {
  534. return /^\d+(\.\d+)?$/i.test(value);
  535. },
  536. message : '货币格式不正确'
  537. },
  538. qq : {// 验证QQ,从10000开始
  539. validator : function(value) {
  540. return /^[1-9]\d{4,9}$/i.test(value);
  541. },
  542. message : 'QQ号码格式不正确'
  543. },
  544. integer : {// 验证整数
  545. validator : function(value) {
  546. return /^[+]?[1-9]+\d*$/i.test(value);
  547. },
  548. message : '请输入整数'
  549. },
  550. chinese : {// 验证中文
  551. validator : function(value) {
  552. return /^[\u0391-\uFFE5]+$/i.test(value);
  553. },
  554. message : '请输入中文'
  555. },
  556. chineseAndLength : {// 验证中文及长度
  557. validator : function(value) {
  558. var len = $.trim(value).length;
  559. if (len >= param[0] && len <= param[1]) {
  560. return /^[\u0391-\uFFE5]+$/i.test(value);
  561. }
  562. },
  563. message : '请输入中文'
  564. },
  565. english : {// 验证英语
  566. validator : function(value) {
  567. return /^[A-Za-z]+$/i.test(value);
  568. },
  569. message : '请输入英文'
  570. },
  571. englishAndLength : {// 验证英语及长度
  572. validator : function(value, param) {
  573. var len = $.trim(value).length;
  574. if (len >= param[0] && len <= param[1]) {
  575. return /^[A-Za-z]+$/i.test(value);
  576. }
  577. },
  578. message : '请输入英文'
  579. },
  580. englishUpperCase : {// 验证英语大写
  581. validator : function(value) {
  582. return /^[A-Z]+$/.test(value);
  583. },
  584. message : '请输入大写英文'
  585. },
  586. unnormal : {// 验证是否包含空格和非法字符
  587. validator : function(value) {
  588. return /.+/i.test(value);
  589. },
  590. message : '输入值不能为空和包含其他非法字符'
  591. },
  592. username : {// 验证用户名
  593. validator : function(value) {
  594. return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value);
  595. },
  596. message : '用户名不合法(字母开头,允许6-16字节,允许字母数字下划线)'
  597. },
  598. faxno : {// 验证传真
  599. validator : function(value) {
  600. return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
  601. },
  602. message : '传真号码不正确'
  603. },
  604. zip : {// 验证邮政编码
  605. validator : function(value) {
  606. return /^[1-9]\d{5}$/i.test(value);
  607. },
  608. message : '邮政编码格式不正确'
  609. },
  610. ip : {// 验证IP地址
  611. validator : function(value) {
  612. return /d+.d+.d+.d+/i.test(value);
  613. },
  614. message : 'IP地址格式不正确'
  615. },
  616. name : {// 验证姓名,可以是中文或英文
  617. validator : function(value) {
  618. return /^[\u0391-\uFFE5]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);
  619. },
  620. message : '请输入姓名'
  621. },
  622. engOrChinese : {// 可以是中文或英文
  623. validator : function(value) {
  624. return /^[\u0391-\uFFE5]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);
  625. },
  626. message : '请输入中文'
  627. },
  628. engOrChineseAndLength : {// 可以是中文或英文
  629. validator : function(value) {
  630. var len = $.trim(value).length;
  631. if (len >= param[0] && len <= param[1]) {
  632. return /^[\u0391-\uFFE5]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);
  633. }
  634. },
  635. message : '请输入中文或英文'
  636. },
  637. carNo : {
  638. validator : function(value) {
  639. return /^[\u4E00-\u9FA5][\da-zA-Z]{6}$/.test(value);
  640. },
  641. message : '车牌号码无效(例:粤B12350)'
  642. },
  643. carenergin : {
  644. validator : function(value) {
  645. return /^[a-zA-Z0-9]{16}$/.test(value);
  646. },
  647. message : '发动机型号无效(例:FG6H012345654584)'
  648. },
  649. same : {
  650. validator : function(value, param) {
  651. if ($("#" + param[0]).val() != "" && value != "") {
  652. return $("#" + param[0]).val() == value;
  653. } else {
  654. return true;
  655. }
  656. },
  657. message : '两次输入的密码不一致!'
  658. }
  659. });
  660. /**
  661. * 扩展easyui validatebox的两个方法.移除验证和还原验证
  662. */
  663. $.extend($.fn.validatebox.methods, {
  664. remove : function(jq, newposition) {
  665. return jq.each(function() {
  666. $(this).removeClass("validatebox-text validatebox-invalid").unbind('focus.validatebox').unbind('blur.validatebox');
  667. // remove tip
  668. // $(this).validatebox('hideTip', this);
  669. });
  670. },
  671. reduce : function(jq, newposition) {
  672. return jq.each(function() {
  673. var opt = $(this).data().validatebox.options;
  674. $(this).addClass("validatebox-text").validatebox(opt);
  675. // $(this).validatebox('validateTip', this);
  676. });
  677. },
  678. validateTip : function(jq) {
  679. jq = jq[0];
  680. var opts = $.data(jq, "validatebox").options;
  681. var tip = $.data(jq, "validatebox").tip;
  682. var box = $(jq);
  683. var value = box.val();
  684. function setTipMessage(msg) {
  685. $.data(jq, "validatebox").message = msg;
  686. };
  687. var disabled = box.attr("disabled");
  688. if (disabled == true || disabled == "true") {
  689. return true;
  690. }
  691. if (opts.required) {
  692. if (value == "") {
  693. box.addClass("validatebox-invalid");
  694. setTipMessage(opts.missingMessage);
  695. $(jq).validatebox('showTip', jq);
  696. return false;
  697. }
  698. }
  699. if (opts.validType) {
  700. var result = /([a-zA-Z_]+)(.*)/.exec(opts.validType);
  701. var rule = opts.rules[result[1]];
  702. if (value && rule) {
  703. var param = eval(result[2]);
  704. if (!rule["validator"](value, param)) {
  705. box.addClass("validatebox-invalid");
  706. var message = rule["message"];
  707. if (param) {
  708. for (var i = 0; i < param.length; i++) {
  709. message = message.replace(new RegExp("\\{" + i + "\\}", "g"), param[i]);
  710. }
  711. }
  712. setTipMessage(opts.invalidMessage || message);
  713. $(jq).validatebox('showTip', jq);
  714. return false;
  715. }
  716. }
  717. }
  718. box.removeClass("validatebox-invalid");
  719. $(jq).validatebox('hideTip', jq);
  720. return true;
  721. },
  722. showTip : function(jq) {
  723. jq = jq[0];
  724. var box = $(jq);
  725. var msg = $.data(jq, "validatebox").message
  726. var tip = $.data(jq, "validatebox").tip;
  727. if (!tip) {
  728. tip = $("<div class=\"validatebox-tip\">" + "<span class=\"validatebox-tip-content\">" + "</span>" + "<span class=\"validatebox-tip-pointer\">" + "</span>" + "</div>").appendTo("body");
  729. $.data(jq, "validatebox").tip = tip;
  730. }
  731. tip.find(".validatebox-tip-content").html(msg);
  732. tip.css({
  733. display : "block",
  734. left : box.offset().left + box.outerWidth(),
  735. top : box.offset().top
  736. });
  737. },
  738. hideTip : function(jq) {
  739. jq = jq[0];
  740. var tip = $.data(jq, "validatebox").tip;
  741. if (tip) {
  742. tip.remove;
  743. $.data(jq, "validatebox").tip = null;
  744. }
  745. }
  746. });
  747. /**
  748. * 对easyui dialog 封装
  749. */
  750. yxui.dialog = function(options) {
  751. var opts = $.extend({
  752. modal : true,
  753. onClose : function() {
  754. $(this).dialog('destroy');
  755. }
  756. }, options);
  757. return $('<div/>').dialog(opts);
  758. };
  759. /**
  760. * 相同连续列合并扩展
  761. */
  762. $.extend($.fn.datagrid.methods, {
  763. autoMergeCells : function(jq, fields) {
  764. return jq.each(function() {
  765. var target = $(this);
  766. if (!fields) {
  767. fields = target.datagrid("getColumnFields");
  768. }
  769. var rows = target.datagrid("getRows");
  770. var i = 0, j = 0, temp = {};
  771. for (i; i < rows.length; i++) {
  772. var row = rows[i];
  773. j = 0;
  774. for (j; j < fields.length; j++) {
  775. var field = fields[j];
  776. var tf = temp[field];
  777. if (!tf) {
  778. tf = temp[field] = {};
  779. tf[row[field]] = [i];
  780. } else {
  781. var tfv = tf[row[field]];
  782. if (tfv) {
  783. tfv.push(i);
  784. } else {
  785. tfv = tf[row[field]] = [i];
  786. }
  787. }
  788. }
  789. }
  790. $.each(temp, function(field, colunm) {
  791. $.each(colunm, function() {
  792. var group = this;
  793. if (group.length > 1) {
  794. var before, after, megerIndex = group[0];
  795. for (var i = 0; i < group.length; i++) {
  796. before = group[i];
  797. after = group[i + 1];
  798. if (after && (after - before) == 1) {
  799. continue;
  800. }
  801. var rowspan = before - megerIndex + 1;
  802. if (rowspan > 1) {
  803. target.datagrid('mergeCells', {
  804. index : megerIndex,
  805. field : field,
  806. rowspan : rowspan
  807. });
  808. }
  809. if (after && (after - before) != 1) {
  810. megerIndex = after;
  811. }
  812. }
  813. }
  814. });
  815. });
  816. });
  817. }
  818. });
  819. /**
  820. * 左到右
  821. */
  822. yxui.left2right = function(but) {
  823. var $layout = $($(but).parents('.easyui-layout')[0]);
  824. var left = $layout.find('select')[0];
  825. var rigth = $layout.find('select')[1];
  826. if ($.browser.msie) {// IE 单独处理
  827. for (var i = 0; i < left.options.length; i++) {
  828. var option = left.options[i];
  829. if (option.selected) {
  830. var opt = new Option(option.text, option.value);
  831. rigth.options.add(opt);
  832. left.remove(i);
  833. }
  834. }
  835. } else {
  836. $(left.options).each(function(i, n) {
  837. if (n.selected) {
  838. n.selected = false;
  839. rigth.options.add(n);
  840. }
  841. });
  842. }
  843. };
  844. /**
  845. * 右到左
  846. */
  847. yxui.right2left = function(but) {
  848. var $layout = $($(but).parents('.easyui-layout')[0]);
  849. var left = $layout.find('select')[0];
  850. var rigth = $layout.find('select')[1];
  851. if ($.browser.msie) {// IE 单独处理
  852. for (var i = 0; i < rigth.options.length; i++) {
  853. var option = rigth.options[i];
  854. if (option.selected) {
  855. var opt = new Option(option.text, option.value);
  856. left.options.add(opt);
  857. rigth.remove(i);
  858. }
  859. }
  860. } else {
  861. $(rigth.options).each(function(i, n) {
  862. if (n.selected) {
  863. n.selected = false;
  864. left.options.add(n);
  865. }
  866. });
  867. }
  868. }
  869. /**
  870. * 左全到右
  871. */
  872. yxui.leftall2right = function(but) {
  873. var $layout = $($(but).parents('.easyui-layout')[0]);
  874. var left = $layout.find('select')[0];
  875. var rigth = $layout.find('select')[1];
  876. if ($.browser.msie) {// IE 单独处理
  877. for (var i = 0; i < left.options.length; i++) {
  878. var option = left.options[i];
  879. var opt = new Option(option.text, option.value);
  880. rigth.options.add(opt);
  881. }
  882. $(left).empty();
  883. } else {
  884. $(left.options).each(function(i, n) {
  885. rigth.options.add(n);
  886. });
  887. }
  888. };
  889. /**
  890. * 右全到左
  891. */
  892. yxui.rightall2left = function(but) {
  893. var $layout = $($(but).parents('.easyui-layout')[0]);
  894. var left = $layout.find('select')[0];
  895. var rigth = $layout.find('select')[1];
  896. if ($.browser.msie) {// IE 单独处理
  897. for (var i = 0; i < rigth.options.length; i++) {
  898. var option = rigth.options[i];
  899. var opt = new Option(option.text, option.value);
  900. left.options.add(opt);
  901. }
  902. $(rigth).empty();
  903. } else {
  904. $(rigth.options).each(function(i, n) {
  905. left.options.add(n);
  906. });
  907. }
  908. };
  909. /**
  910. * select 选择框数据采集
  911. *
  912. * @param options
  913. * @return 数组
  914. */
  915. yxui.findSelectMultipleValue = function(options) {
  916. var returnArr = [], ids = [], texts = [];
  917. if ($.browser.msie) {// IE 单独处理
  918. for (var i = 0; i < options.length; i++) {
  919. ids.push(options[i].value);
  920. texts.push(options[i].text);
  921. }
  922. } else {
  923. $(options).each(function(i, n) {
  924. ids.push($(n).val());
  925. texts.push($(n).html());
  926. });
  927. }
  928. returnArr.push(ids);
  929. returnArr.push(texts);
  930. return returnArr;
  931. }

EASYUI API扩展(重要)

API扩展项目源码下载