easyui datagrid可编辑框datebox校验以及自定义扩展

最新推荐文章于 2024-04-03 07:06:33 发布

紫木冰焰

最新推荐文章于 2024-04-03 07:06:33 发布

阅读量2.2k

点赞数 2

分类专栏： js easyui 文章标签： easyui datagrid datebox

本文链接：https://blog.csdn.net/yinkgh/article/details/87709846

版权

js 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

easyui

4 篇文章 0 订阅

订阅专栏

如下两种方式配合，
1、实现datagrid可编辑框填写日期的格式的校验
2、填写99999999之后，自动转换为2099-12-31
3、再次点击编辑，不修改任何内容保持2099-12-31显示，不自动修改为当前日期的问题解决。

//这个是datagrid代码片段
{title : '到期日',field : 'm',width : '100px',align : 'center',rowspan:2,
	editor : {
		type : 'datebox',
		options : {
			//required: true
			validType:'validDate[\'yyyy-MM-dd\']' 
		}
	},
	formatter:function(value,row){
		if("99999999"==value) return "2099-12-31";
		return value;
	}
},

 //验证扩展 日期格式校验
 $.extend($.fn.datebox.defaults.rules, {   
     validDate: {
         validator: function(value){    
	if("99999999"==value){return true;}
             var date = $.fn.datebox.defaults.parser(value);  
             var s = $.fn.datebox.defaults.formatter(date);  
             return s==value;   
         },    
         message: '请输入正确日期格式.'    
     }  
 });

//扩展databox控件
$.extend($.fn.datagrid.defaults.editors, {
     datebox: {
         init: function (container, options) {
             var input = $('<input type="text">').appendTo(container);
             input.datebox(options);
             return input;
         },
         destroy: function (target) {
             $(target).datebox('destroy');
         },
         getValue: function (target) {	
			var oldValue = $(target).datebox('getValue');//获得旧值
            return oldValue;
         },
         setValue: function (target, value) {
			if("99999999"==value){
				$(target).datebox('setValue', "2099-12-31");//设置新值的日期格式
			} else{
				$(target).datebox('setValue', value);//设置新值的日期格式
			}
             
         },
         resize: function (target, width) {
             $(target).datebox('resize', width);
         }
     }
 });