目录
【坑1】:datagrid列下继续通过formatter嵌入EasyUI控件(尤其是下拉框combobox)
【坑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
这个不知谁整理的,将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 了,希望更好用了,)