easyui DateTimeBox OK

 

一、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扩展方法 + jutil.js

博客分类：

• jQueryEasyUi

 

EasyUI扩展方法：

 

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

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

 

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

Js代码  

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增加动态改变列编辑的类型  

 

Js代码  

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  

  

Js代码  

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并没有提供这一方法，一下是一个扩展的方法可以供大家使用，希望对大家能有所帮助。 

扩展方法如下：

Js代码  

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

 

调用方法如下：

Js代码  

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

 

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

其他：

Js代码  

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

 

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

其中方法如图：

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

 使用：

Js代码  

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:

Java代码  

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

 

EASYUI API扩展（重要） 

API扩展项目源码下载

转载于:https://www.cnblogs.com/wangcq/p/3979380.html