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

因为是转载文章 在此标明出处，以前有文章是转的没标明的请谅解，因为有些已经无法找到出处，或者与其它原因。

如有冒犯请联系本人，或删除，或标明出处。

因为好的文章，以前只想收藏，但连接有时候会失效，所以现在碰到好的直接转到自己这里。

原文 出处http://blog.sina.com.cn/s/blog_5606529501018vho.html

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

（以下所有代码都是前台页面的JS代码）

1.定义一个方法，使日期列的显示正常：

    function formatDatebox(value) {
        if (value == null || value == '') {
            return '';
        }
    var dt;
    if (value instanceof Date) {
        dt = value;
    }
    else {
        dt = new Date(value);
        if (isNaN(dt)) {
            value = value.replace(/\/Date\((-?\d+)\)\//, '$1'); //标红的这段是关键代码，将那个长字符串的日期值转换成正常的JS日期格式
            dt = new Date();
            dt.setTime(value);
        }
    }

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

2.前面那个方法只是让控件在普通状态下的显示得到纠正，但dataGrid控件还有行编辑状态，行编辑状态下还是会出现日期不能正常显示的状况，

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

$.extend(
    $.fn.datagrid.defaults.editors, {
        datebox: {
            init: function (container, options) {
                var input = $('').appendTo(container);
                input.datebox(options);
                return input;
            },
            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);
            }
        }
    });


3.为原始Date类型拓展format一个方法，用于日期显示的格式化
Date.prototype.format = function (format) 
{
    var o = {
        "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 (var k in o) if (new RegExp("(" + k + ")").test(format))
        format = format.replace(RegExp.$1,
      RegExp.$1.length == 1 ? o[k] :
        ("00" + o[k]).substr(("" + o[k]).length));
    return format;
}

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

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

  $('#dg').datagrid({

   columns: [[

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

你可以把前面三个步骤的代码拷贝到一个JS文件里面，在页面进行关联，然后页面应用一下其中的formatDatebox方法（步骤2中的拓展方法则是自动会执行，不用操心）

///有什么不明白的地方请给我留言~。