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

博客分类：
 

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扩展项目源码下载

posted on 2014-09-18 15:51  wcq  阅读(2735)  评论(1)  编辑  收藏  举报

导航