总结jquery EasyUI的坑

最新推荐文章于 2022-07-04 22:51:15 发布

放学后的泡泡

最新推荐文章于 2022-07-04 22:51:15 发布

阅读量599

点赞数 1

本文链接：https://blog.csdn.net/rainyspring4540/article/details/86508554

版权

环境：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

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

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

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

加入红色框框的代码
即：

$.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）。

先写个案例：

<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" />

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

<input class="easyui-validatebox" data-options="required:true, validType:['email','length[0,20]'] ">

基本规则如下：

扩展方法如下：

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

找到如下位置：

$.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

持续更新中。。。

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

放学后的泡泡

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
总结jquery EasyUI的坑

目录环境：jQuery EasyUI 1.4.1【坑1】：datagrid列下继续通过formatter嵌入EasyUI控件（尤其是下拉框combobox）【坑2】：textbox上添加键盘点击事件【坑3】：针对ValidateBox扩展校验种类（因为combobox、datebox、textbox都是继承自ValidateBox，故这里只提ValidateBox）。...
复制链接

扫一扫