easyUI的datagrid控件日期列不能正確顯示Json格式數據的解決方案

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.定義方法使日期列的顯示符合閱讀習慣：

 

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