easyUI的datagrid控件日期列不能正确显示Json格式数据的解决方案

时间:2021-01-17 09:05:01

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

第一种:比较简单

定义函数:
function formatterdate(val, row) {
                  var date = new Date(val);
                  return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
 }
然后在datagrid中添加:
  formatter:formatterdate

函数可以根据自己的需要修改格式。

第二种解决办法:

完整Demo文件:dateboxFormat-demo

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

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

  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. function formatDateBoxFull(value) {
  10. if (value == null || value == '') {
  11. return '';
  12. }
  13. var dt = parseToDate(value);
  14. return dt.format("yyyy-MM-dd hh:mm:ss");
  15. }

 

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

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

 

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

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

  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方法名关联到这个成员就可以了。

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

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

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

完整Demo文件:dateboxFormat-demo