easyUI的datagrid控件日期列格式化

野性酷女 2022-05-26 05:36 311阅读 0赞

转自：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][view plain]

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][view plain]

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][view plain]

1.  $.extend(  
2.      $.fn.datagrid.defaults.editors, \{  
3.          datebox: \{  
4.              init: function (container, options) \{  
5.                  var input = $('<input type="text">').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 = $('<input type="text">').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][view plain]

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**方法。

[dateboxFormat-demo]: http://download.csdn.net/detail/idoiknow/8313557
[view plain]: https://blog.csdn.net/idoiknow/article/details/8136093#