码迷,mamicode.com
首页 > Web开发 > 详细

EasyUI扩展方法 + jutil.js

时间:2015-03-30 10:58:44      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:

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

标签:

原文地址:http://www.cnblogs.com/shsgl/p/4377124.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!