easyUI的datagrid控件日期列格式化

转自:https://blog.csdn.net/idoiknow/article/details/8136093

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


完整Demo文件:dateboxFormat-demo


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

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

[javascript]  view plain  copy
  1. function formatDatebox(value) {  
  2.     if (value == null || value == '') {  
  3.         return '';  
  4.     }  
  5.     var dt = parseToDate(value);//关键代码,将那个长字符串的日期值转换成正常的JS日期格式  
  6.     return dt.format("yyyy-MM-dd"); //这里用到一个javascript的Date类型的拓展方法,这个是自己添加的拓展方法,在后面的步骤3定义  
  7. }  
  8.   
  9. /*带时间*/  
  10. function formatDateBoxFull(value) {  
  11.     if (value == null || value == '') {  
  12.         return '';  
  13.     }  
  14.     var dt = parseToDate(value);  
  15.     return dt.format("yyyy-MM-dd hh:mm:ss");  
  16. }  


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

[javascript]  view plain  copy
  1. function parseToDate(value) {  
  2.     if (value == null || value == '') {  
  3.         return undefined;   
  4.     }  
  5.   
  6.     var dt;  
  7.     if (value instanceof Date) {  
  8.         dt = value;  
  9.     }  
  10.     else {  
  11.         if (!isNaN(value)) {  
  12.             dt = new Date(value);  
  13.         }  
  14.         else if (value.indexOf('/Date') > -1) {  
  15.             value = value.replace(/\/Date(?\d+)(−?\d+)\//, '$1');  
  16.             dt = new Date();  
  17.             dt.setTime(value);  
  18.         } else if (value.indexOf('/') > -1) {  
  19.             dt = new Date(Date.parse(value.replace(/-/g, '/')));  
  20.         } else {  
  21.             dt = new Date(value);  
  22.         }  
  23.     }  
  24.     return dt;  
  25. }  
  26.   
  27. //为Date类型拓展一个format方法,用于格式化日期  
  28. Date.prototype.format = function (format) //author: meizz   
  29. {  
  30.     var o = {  
  31.         "M+"this.getMonth() + 1, //month   
  32.         "d+"this.getDate(),    //day   
  33.         "h+"this.getHours(),   //hour   
  34.         "m+"this.getMinutes(), //minute   
  35.         "s+"this.getSeconds(), //second   
  36.         "q+": Math.floor((this.getMonth() + 3) / 3),  //quarter   
  37.         "S"this.getMilliseconds() //millisecond   
  38.     };  
  39.     if (/(y+)/.test(format))  
  40.         format = format.replace(RegExp.$1,  
  41.                 (this.getFullYear() + "").substr(4 - RegExp.$1.length));  
  42.     for (var k in o)  
  43.         if (new RegExp("(" + k + ")").test(format))  
  44.             format = format.replace(RegExp.$1,  
  45.                     RegExp.$1.length == 1 ? o[k] :  
  46.                         ("00" + o[k]).substr(("" + o[k]).length));  
  47.     return format;  
  48. };  

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

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

[javascript]  view plain  copy
  1. $.extend(  
  2.     $.fn.datagrid.defaults.editors, {  
  3.         datebox: {  
  4.             init: function (container, options) {  
  5.                 var input = $('').appendTo(container);  
  6.                 input.datebox(options);  
  7.                 return input;  
  8.             },  
  9.             destroy: function (target) {  
  10.                 $(target).datebox('destroy');  
  11.             },  
  12.             getValue: function (target) {  
  13.                 return $(target).datebox('getValue');  
  14.             },  
  15.             setValue: function (target, value) {  
  16.                 $(target).datebox('setValue', formatDatebox(value));  
  17.             },  
  18.             resize: function (target, width) {  
  19.                 $(target).datebox('resize', width);  
  20.             }  
  21.         },  
  22.         datetimebox:{  
  23.             init: function (container, options) {  
  24.                 var input = $('').appendTo(container);  
  25.                 input.datetimebox(options);  
  26.                 return input;  
  27.             },  
  28.             destroy: function (target) {  
  29.                 $(target).datetimebox('destroy');  
  30.             },  
  31.             getValue: function (target) {  
  32.                 return $(target).datetimebox('getValue');  
  33.             },  
  34.             setValue: function (target, value) {  
  35.                 $(target).datetimebox('setValue', formatDateBoxFull(value));  
  36.             },  
  37.             resize: function (target, width) {  
  38.                 $(target).datetimebox('resize', width);  
  39.             }  
  40.         }  
  41.     });  
 4.前面的准备工作做好后,接下来就是将前面写的 formatDatebox 方法应用到控件 ,datagrid控件的列属性里面有一个formatter成员,用来自定义列的显示方法。把步骤1中 定义的那个  formatDatebox或formatDateboxFull方法名关联到这个成员就可以了。

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

[javascript]  view plain  copy
  1. $('#dg').datagrid({  
  2.   
  3.    columns: [[  
  4.   
  5.          { field: 'StartDate', title: '开工日期', width: 80, formatter:formatDatebox, editor: 'datebox' },  
  6.          { field: 'CompletedDate', title: '竣工日期', width: 80, formatter:formatDateboxFull, editor: 'datetimebox' },  

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

你可能感兴趣的:(jquery,easyUI)