easyUI的datagrid控件日期列格式化

easyUI的datagrid控件日期列格式化。EasyUI是一套比较轻巧易用的Jquery控件，在使用过程中遇到一个问题，它的列表控件——datagrid， 在显示日期列的时候，由于后台返回给页面的数据是Json格式的，其中的日期字段，在后台是正常的“2012-11-10 12:18:00”这样的格式，json序列化后返回到前台页面就被转换成一个像/Date(1419264000000)/的格式，导致easyUI无法解析这个字段。经过一番研究，自己捣鼓出来一个解决方案：

完整Demo文件：dateboxFormat-demo

(以下所有代码都是前台页面的JS代码)

1.定义方法使日期列的显示符合阅读习惯：

[javascript]view plaincopy

functionformatDatebox(value){

if(value==null||value==''){

return'';

}

vardt=parseToDate(value);//关键代码，将那个长字符串的日期值转换成正常的JS日期格式

returndt.format("yyyy-MM-dd");//这里用到一个javascript的Date类型的拓展方法，这个是自己添加的拓展方法，在后面的步骤3定义

}

/*带时间*/

functionformatDateBoxFull(value){

if(value==null||value==''){

return'';

}

vardt=parseToDate(value);

returndt.format("yyyy-MM-ddhh:mm:ss");

}

2.上面用到的日期处理方法

[javascript]view plaincopy

functionparseToDate(value){

if(value==null||value==''){

returnundefined;

}

vardt;

if(valueinstanceofDate){

dt=value;

}

else{

if(!isNaN(value)){

dt=newDate(value);

}

elseif(value.indexOf('/Date')>-1){

value=value.replace(/\/Date(\d+)(\d+)\//,'$1');

dt=newDate();

dt.setTime(value);

}elseif(value.indexOf('/')>-1){

dt=newDate(Date.parse(value.replace(/-/g,'/')));

}else{

dt=newDate(value);

}

}

returndt;

}

//为Date类型拓展一个format方法，用于格式化日期

Date.prototype.format=function(format)//author:meizz

{

varo={

"M+":this.getMonth()+1,//month

"d+":this.getDate(),//day

"h+":this.getHours(),//hour

"m+":this.getMinutes(),//minute

"s+":this.getSeconds(),//second

"q+":Math.floor((this.getMonth()+3)/3),//quarter

"S":this.getMilliseconds()//millisecond

};

if(/(y+)/.test(format))

format=format.replace(RegExp.$1,

(this.getFullYear()+"").substr(4-RegExp.$1.length));

for(varkino)

if(newRegExp("("+k+")").test(format))

format=format.replace(RegExp.$1,

RegExp.$1.length==1o[k]:

("00"+o[k]).substr((""+o[k]).length));

returnformat;

};

3.步骤1定义的方法让控件在阅读状态下的显示得到纠正，但dataGrid控件还有行编辑状态，行编辑状态下还是会出现日期不能正常显示的状况，

此时需要拓展datagrid方法(这里说成重写比较贴切)，使datagrid行编辑时，日期控件内的时间格式正确显示：

[javascript]view plaincopy

$.extend(

$.fn.datagrid.defaults.editors,{

datebox:{

init:function(container,options){

varinput=$('').appendTo(container);

input.datebox(options);

returninput;

},

destroy:function(target){

$(target).datebox('destroy');

},

getValue:function(target){

return$(target).datebox('getValue');

},

setValue:function(target,value){

$(target).datebox('setValue',formatDatebox(value));

},

resize:function(target,width){

$(target).datebox('resize',width);

}

},

datetimebox:{

init:function(container,options){

varinput=$('').appendTo(container);

input.datetimebox(options);

returninput;

},

destroy:function(target){

$(target).datetimebox('destroy');

},

getValue:function(target){

return$(target).datetimebox('getValue');

},

setValue:function(target,value){

$(target).datetimebox('setValue',formatDateBoxFull(value));

},

resize:function(target,width){

$(target).datetimebox('resize',width);

}

}

});4.前面的准备工作做好后，接下来就是将前面写的formatDatebox方法应用到控件 ，datagrid控件的列属性里面有一个formatter成员，用来自定义列的显示方法。把步骤1中定义的那个formatDatebox或formatDateboxFull方法名关联到这个成员就可以了。

(这里只截取部分代码，相信正在用这个控件的朋友一看就明白了)

[javascript]view plaincopy

$('#dg').datagrid({

columns:[[

{field:'StartDate',title:'开工日期',width:80,formatter:formatDatebox,editor:'datebox'},

{field:'CompletedDate',title:'竣工日期',width:80,formatter:formatDateboxFull,editor:'datetimebox'},

你可以把前面三个步骤的代码拷贝到一个JS文件里面，在页面进行关联，然后页面应用一下其中的formatDatebox方法。