原作地址http://blog.csdn.net/idoiknow/article/details/8136093
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 = $('<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); } } });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中的拓展方法则是自动会执行,不用操心)