关于easyui datagrid 中日期显示问题

来源：互联网发布：农业科技网络书屋网站编辑：程序博客网时间：2024/05/21 07:48

easyui datagrid 日期时间显示不正常，

原因：后台Java 类型为 DATE 经过JSON工具转化后传到前台来就乱了

两种思路： 1：还没进行json处理之前就给专程string

2. 到了前台再转回来。

解决方案一：

{field:'issueTime',title:'生效时间',
formatter:function(value,row,index){
var unixTimestamp = new Date(value);
return unixTimestamp.toLocaleString();
}
},

解决方案二：

为了克服数据中时间为空的情况，我们可以考虑使用前台js解析返回的json数据。

第一步、我们先定义一个方法，使日期列正常显示，js代码如下：

[javascript] view plain copy print?

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定义
}

第二步、前面那个方法只是让控件在普通状态下的显示得到纠正，但dataGrid控件还有行编辑状态，行编辑状态下还是会出现日期不能正常显示的状况，此时需要拓展datagrid方法(这里说成重写比较贴切)，使datagrid行编辑时，日期控件内的时间格式正确显示：

[javascript] view plain copy print?

$.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);
}
}
});

第三步、为原始Date类型拓展format一个方法，用于日期显示的格式化

[javascript] view plain copy print?

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;
}

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

[javascript] view plain copy print?

function initTable(queryData) {
$('#test').datagrid({ //定位到Table标签，Table标签的ID是test
fitColumns: true,
url: '/OperationLog/QueryLog', //指向后台的Action来获取当前用户的信息的Json格式的数据
title: '日志信息查询', //标识
iconCls: 'icon-save',
height:335,
nowrap: true,
autoRowHeight: false,
striped: true,
collapsible: true,
pagination: true,
rownumbers: true,
//sortName: 'ID', //根据某个字段给easyUI排序
//sortOrder: 'asc',
remoteSort: false,
//idField: 'number',
queryParams: queryData, //异步查询的参数
columns: [[
{ title: '操作人', field: 'userID',sortable: true,},
{ title: '操作类型', field: 'operatorType', sortable: true, },
{ title: '档案人姓名', field: 'userName', sortable: true, },
{ title: '操作时间', field: 'operatorTime', formatter: formatDatebox, editor: 'datebox', sortable: true, width: 10, }
]],
});
}
</script>

我最后是这么做的：

{field:'kkny',title:'开考年月',width:150,formatter:function(value,row,index){                          var unixTimestamp = new Date(value);                           return unixTimestamp.toLocaleString();                     }}function datetoLocal(value){                 var unixTimestamp = new Date(value);                var year = unixTimestamp.getFullYear();                var month= unixTimestamp.getMonth()+1;                var day = unixTimestamp.getDate()+1;                var hours = unixTimestamp.getHours()+1 ;                var minutes = unixTimestamp.getMinutes()+1 ;                    var seconde = unixTimestamp.getSeconds()+1;                var result = year+"-"+month+"-"+day +"  "+hours+":"+minutes+":"+seconde;                return result;              }

阅读全文

0 0