总结jquery EasyUI的坑

痛定思痛。 2022-03-26 08:38 235阅读 0赞

**目录**

环境：jQuery EasyUI 1.4.1

【坑1】：datagrid列下继续通过formatter嵌入EasyUI控件（尤其是下拉框combobox）

【坑2】：textbox上添加键盘点击事件

【坑3】：针对ValidateBox扩展校验种类（因为combobox、datebox、textbox都是继承自ValidateBox，故这里只提ValidateBox）。

【坑4】：disable等于true时，表单提交时，form下无法提交带有name属性的控件。

【坑5】：该坑来源于坑5，将“非禁用控件”假扮成“禁用控件”。

【坑6】 渲染控件，不要js和html混用，至于恶果请参考下文：

--------------------

# #

## 环境：jQuery EasyUI 1.4.1 ##

推荐个自己的资源：

[https://download.csdn.net/download/rainyspring4540/9690977][https_download.csdn.net_download_rainyspring4540_9690977]

这个不知谁整理的，将EasyUI控件的父子关系都列出来了，很不错，个人表示根本不离手。

## 【坑1】：datagrid列下继续通过formatter嵌入EasyUI控件（尤其是下拉框combobox） ##

首先强调：datagrid的列中不建议再次嵌入EasyUI的控件（日期框、下拉框、文本框）。  
如果非要这么做，在jquery.easyui.min.js内的如图位置（你可以ctr+F搜素一下这个位置）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JhaW55c3ByaW5nNDU0MA_size_16_color_FFFFFF_t_70][]

加入红色框框的代码  
    即：

$.parser.parse(_72a);

不推荐使用原因是会让datagrid加载很慢，即便是用过真分页，也依然慢；更甚者如果这种风格的页面贯彻下去，客户会让你在很多列上加，如果datagrid中有超过5列使用Easyui的下拉框，相信我，你会看到页面加载datagrid时那如百叶窗般一层层的独特美感！

## 【坑2】：textbox上添加键盘点击事件 ##

强烈建议，控件内容的校验请操控textbox继承的父控件ValidateBox（后面会给出添加方法），不要试图监控键盘点击事件。

如果你非要这么做，方法如下：

//大写锁定提醒
    $('#login_pwd').textbox({
    	inputEvents: $.extend({},$.fn.textbox.defaults.inputEvents,{
    		keypress: function (e){
    			var keyCode = e.which;
    			if((keyCode >= 65 &&  keyCode <= 90)||keyCode==20 ) {
    			  	//$('#login_xxxx').show();
    			}else if((keyCode >= 97 &&keyCode <= 122)||keyCode==20) {
    			  	//$('#login_xxxx').hide();
    			} 
    		}
    	})
    });

我特意给出了这段代码的注释，貌似实现了监控键盘大写时的锁定提示功能，但实际不尽如人意，因为浏览器在最初加载时无法获取键盘最初的锁定状态。唉（至今还没找到）

## 【坑3】：针对ValidateBox扩展校验种类（因为combobox、datebox、textbox都是继承自ValidateBox，故这里只提ValidateBox）。 ##

先写个案例：

ValidateBox控件是通过validType属性实现校验的，值可以是单个串，也可以是串数组，形如：

基本规则如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JhaW55c3ByaW5nNDU0MA_size_16_color_FFFFFF_t_70 1][]

扩展方法如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JhaW55c3ByaW5nNDU0MA_size_16_color_FFFFFF_t_70 2][]

如果你打算全局生效，应该修改jQuery.easyui.min.js

找到如下位置：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JhaW55c3ByaW5nNDU0MA_size_16_color_FFFFFF_t_70 3][]

$.extend($.fn.validatebox.defaults.rules, {
        image: {
            validator: function (value, param) {
              return /\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG|BMP)$/.test(value);
            },
            message: '图片格式不正确'
          },
        ordCodeCfg: {
              validator: function (value, param) {
            	  var lengtha=(value.split("#")).length-1;
            	 // var f=/#0{1,}#/.test(value);
            	  var f=/#0{1,}#/.test(value);
            	  var f1=/^[A-Za-z0-9\-\#]+$/.test(value);
            	  f=lengtha>2?false:f;
                  return f&&f1?true:false;
              },
              message: '编号规则格式不准确，请输入只含英文、数字、#、-的字符，且包含#000#的字符组合，#字符只能出现两次'
         },
        mobile: {
          validator: function (value, param) {
            return /^(?:13\d|15\d|18\d)-?\d{5}(\d{3}|\*{3})$/.test(value);
          },
          message: '手机号码不正确'
        },
        number: {
          validator: function (value, param) {
            return /^[0-9]+.?[0-9]*$/.test(value);
          },
          message: '请输入数字'
        },
       mone:{
          validator: function (value, param) {
           	return (/^(([1-9]\d*)|\d)(\.\d{1,2})?$/).test(value);
           },
           message:'请输入整数或最多保留两位小数'
    
        },
       vmone:{
            validator: function (value, param) {
            	var tt=/^(([1-9]\d*)|\d)(\.\d{1,2})?$/;
            	var ff=tt.test(value);
            	if(ff){
            		if(param&&value<=0){
            			ff=false;
            		}
            	}
             	return ff;
             },
             message:'请输入大于0的整数或两位小数'
    
        },
       integ:{
          validator:function(value,param){
            return /^[+]?[0-9]\d*$/.test(value);
          },
          message: '请输入整数'
        },
        mininteg:{
            validator:function(value,param){
          	  var tt=/^[+]?[0-9]\d*$/.test(value);
          	  if(tt){
          		  if(param&&parseInt(value)==0){
          			  tt=false;
          		  }
          	  }
              return tt;
            },
            message: '请输入最小为1的整数'
          },
        range:{
          validator:function(value,param){
            if(/^[0-9]\d*$/.test(value)){
              return value >= param[0] && value <= param[1]
            }else{
              return false;
            }
          },
          message:'输入的数字在{0}到{1}之间'
        },
        minLength:{
          validator:function(value,param){
            return value.length >=param[0]
          },
          message:'至少输入{0}个字'
        },
        maxLength:{
          validator:function(value,param){
            return value.length<=param[0]
          },
          message:'最多{0}个字'
        },
        myDecimalNumber:{
            validator:function(value,param){
        		var p1=param[0]?parseInt(param[0]):7;
        		var p2=param[1]?parseInt(param[1]):3;
            	return (new RegExp('^[\\d]{1,'+p1+'}$').test(value)||new RegExp('^[\\d]{1,'+p1+'}\\.([\\d]{1,'+p2+'})$').test(value));
            },
            message:'整数部分长度{0}个字、其中小数部分{1}个字'
        },
         englishOrNum : {
              validator : function(value) {
            	  return /^[A-Za-z0-9]+$/.test(value);
              },
              message : '请输入只含英文、数字的字符'
          },
         aenglishOrNum: {
              validator : function(value) {
            	  var tt=/^[^\'\" \u4e00-\u9fa5^\\]*$/;
            	  return tt.test(value);
              },
              message : '请输入除了引号、空格、中文、\\之外的字符'
          },
          benglishOrNum : {
              validator : function(value) {
            	var length=$.trim(value).length;
              	var flag=value.length>length?false:true;
                var tt=/^[A-Za-z0-9 ]+$/;
                 var ff=tt.test(value);
            	  return flag&&ff?true:false;
              },
              message : '请输入字母、数字且前后不含空格的字符'
          },
          cenglishOrNum : {
              validator : function(value) {
            	  var tt=/^[^\"\'\\]*$/;
            	  return tt.test(value);
              },
              message : '请输入除了英文引号、\\之外的字符'
          },
          denglishOrNum : {
              validator : function(value) {
            	  return /^[A-Za-z0-9_-]+$/.test(value);
              },
              message : '请输入只含英文、数字、下划线、中划线的字符'
          },
          jenglishOrNum: {
              validator : function(value) {
            	 return /^[^\'\" <>$?^\\]*$/.test(value);
              },
              message : '请输入除了英文单双引号,空格，<>,$?^\\之外的字符'
          },
          kenglishOrNum : {// 请输入只能含有字母、数字、#、-的字符
              validator : function(value) {
            	  return /^[A-Za-z0-9\-\#]+$/.test(value);
              },
              message : '请输入只能含有字母、数字、#、-的字符'
          },
          xenglishOrNum: {
              validator : function(value) {
            	  var tt=/^[^\'\" \u4e00-\u9fa5^\\^,，]*$/;
            	  return tt.test(value);
              },
              message : '请输入除了引号、空格、中文、逗号、\\之外的字符'
          },
          chineseOrEnglish : {
              validator : function(value) {
            	 var tt=/^[A-Za-z\u4e00-\u9fa5]+$/;
            	  return tt.test(value);
              },
              message : '请输入只含英文、中文的字符'
          },
          
        date:{
    	    validator: function (value, param) {
    	       	return (/((^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(10|12|0?[13578])([-\/\._])(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(11|0?[469])([-\/\._])(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(0?2)([-\/\._])(2[0-8]|1[0-9]|0?[1-9])$)|(^([2468][048]00)([-\/\._])(0?2)([-\/\._])(29)$)|(^([3579][26]00)([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][0][48])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][0][48])([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][2468][048])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][2468][048])([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][13579][26])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][13579][26])([-\/\._])(0?2)([-\/\._])(29)$))/).test(value);
    	       },
    	       message:'日期格式非法'
    	  },
    	 bodyDiameter:{
    	    validator: function (value, param) {
    	       	return (/^(6|8|10|15|20|25|32|40|50|65|80|90|100|125|150|200|250|300|350|400|450|500|550|600|650|700|750|800|850|900|950|1000|1050|1100|1150|1200|1300|1400|1500|1600|1700|1800|1900|2000)$/).test(value);
    	       },
    	       message:'请输入合法的公称直径'
    		},
       notNull:{
    		   validator: function (value, param) {
    			   return value.length>0?true:false;
    		   },
    		   message:'不能为空'
       }
      });

看到如上代码，相信你会根据正则自己定制了吧。

## 【坑4】：disable等于true时，表单提交时，form下无法提交带有name属性的控件。 ##

坦白来讲，这不算啥瑕疵，开发人员注意下就好了，服务器的controller接受参数时，别属性中没有值就认为应该更新为空或null，可能是禁用控件默认不提交的结果。

## 【坑5】：该坑来源于坑5，将“非禁用控件”假扮成“禁用控件”。 ##

这么做的理由有两个：

1、添加界面和修改界面是同一个界面（为了复用代码）。

2、用户最初很认可“禁用控件”的灰色禁用效果（也许认为那样萌萌哒），也就是用户体验很好。

3、因为想继续保持复用1的原则，不打算因为这个原因，将添加、修改分为两个控件分别提交。

那如何假扮呢？

方法如下：

//禁用焊缝号		
    $('#xxx').textbox('readonly',true).textbox('textbox').addClass("myTextbox-readonly-color");

增加个css：

/* 修改文本框的只读属性时的颜色 */
    .myTextbox-readonly-color{
    	background-color:#EBEBE4;
    }

css这个颜色就是控件被禁用时那个颜色，我用取色器取的色，呵呵

## 【坑6】 渲染控件，不要js和html混用，至于恶果请参考下文： ##

[https://blog.csdn.net/rainyspring4540/article/details/49174281][https_blog.csdn.net_rainyspring4540_article_details_49174281]

持续更新中。。。

（坦白来讲，该控件挺好用的额，许多很成熟的效果实现贴合面向对象，学习入门浅，目测EasyUI已经是升级到1.7 了，希望更好用了，）

[https_download.csdn.net_download_rainyspring4540_9690977]: https://download.csdn.net/download/rainyspring4540/9690977
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JhaW55c3ByaW5nNDU0MA_size_16_color_FFFFFF_t_70]: /images/20220326/dc2aca697a6e4967a56b74c641ef67dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JhaW55c3ByaW5nNDU0MA_size_16_color_FFFFFF_t_70 1]: /images/20220326/71fc2e30343a445ab345adc8f28c5075.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JhaW55c3ByaW5nNDU0MA_size_16_color_FFFFFF_t_70 2]: /images/20220326/9d64740a1f9a4f78bce970d5e8f6148c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JhaW55c3ByaW5nNDU0MA_size_16_color_FFFFFF_t_70 3]: /images/20220326/b03c7c7a1ca84fa98a2a6056da751bb6.png
[https_blog.csdn.net_rainyspring4540_article_details_49174281]: https://blog.csdn.net/rainyspring4540/article/details/49174281