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

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

完整Demo文件：dateboxFormat-demo

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

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

function formatDatebox(value) {    if (value == null || value == '') {        return '';    }    var dt = parseToDate(value);//关键代码，将那个长字符串的日期值转换成正常的JS日期格式    return dt.format("yyyy-MM-dd"); //这里用到一个javascript的Date类型的拓展方法，这个是自己添加的拓展方法，在后面的步骤3定义}/*带时间*/function formatDateBoxFull(value) {    if (value == null || value == '') {        return '';    }    var dt = parseToDate(value);    return dt.format("yyyy-MM-dd hh:mm:ss");}

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

function parseToDate(value) {    if (value == null || value == '') {        return undefined;     }    var dt;    if (value instanceof Date) {        dt = value;    }    else {        if (!isNaN(value)) {            dt = new Date(value);        }        else if (value.indexOf('/Date') > -1) {            value = value.replace(/\/Date\((-?\d+)\)\//, '$1');            dt = new Date();            dt.setTime(value);        } else if (value.indexOf('/') > -1) {            dt = new Date(Date.parse(value.replace(/-/g, '/')));        } else {            dt = new Date(value);        }    }    return dt;}//为Date类型拓展一个format方法，用于格式化日期Date.prototype.format = function (format) //author: meizz {    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;};

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

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

$.extend(    $.fn.datagrid.defaults.editors, {        datebox: {            init: function (container, options) {                var input = $('<input type="text">').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);            }        },        datetimebox:{            init: function (container, options) {                var input = $('<input type="text">').appendTo(container);                input.datetimebox(options);                return input;            },            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方法名关联到这个成员就可以了。

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

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

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

完整Demo文件：dateboxFormat-demo