一、遇见的问题
EasyUI是一套比较轻巧易用的Jquery控件,在EasyUI中,我认为,他的表格 , 做的堪称完美。但是,美中不足的是,在使用过程中遇到一个问题,它的列表控件——datagrid,在显示日期列的时候,由于后台返回给页面的数据是Json格式的,其中的一个日期字段,在后台还是正常的“2012-11-10 12:18:00”这样的格式,到了前台页面就被转换成一个像 /Date(1242357713797+0800)/ 这样的格式。
二、解决方案
在出现这个问题之后,我查询了一些解决方案,总体上分成两类,一类是在返回json之前,把DataTime类型转换成string类型,还有一类方法,就是在前台js处理返回的数据。
1、后台解决方案:
在json序列化之前,我们把查询出来的值,复值给viewmodel,同时,把DataTime类型的数据,转换成String类型,然后再json序列化。不过,这样有一个问题,如果你的时间是时间戳,或者说,你的时间字段,在数据库中不允许为空的话,这个方法很有效。但是,一点你的数据可以为空,类型转换就要出现问题。代码例子如下:
/// <summary>
/// 查询操作日志
/// </summary>
/// <returns></returns>
public ActionResult QueryLog()
{
IOperationLogBll operationLogBll = SpringHelper.GetObject<IOperationLogBll>("OperationLogBll");
//获取前台页码,页面行数,以及总数据
int pageIndex = Request["page"] == null ? 1 : int.Parse(Request["page"]);
int pageSize = Request["rows"] == null ? 20 : int.Parse(Request["rows"]);
int total = 0;
//获取前台输入的数据 安参数查询
string userId = Request["userId"];
string beforetime = Request["beforetime"];
string lasttime = Request["lasttime"];
List<OperationLogViewModel> listUniversityStd = new List<OperationLogViewModel>();
//根据参数,使用具体的查询方法
if (userId != null && beforetime !="")
{
listUniversityStd = operationLogBll.QueryLog(userId, beforetime, lasttime, pageSize, pageIndex, out total);
}
else if (userId != null && beforetime == "")
{
listUniversityStd = operationLogBll.QueryLog(userId, pageSize, pageIndex, out total);
}
else
{
listUniversityStd = operationLogBll.QueryLog(pageSize, pageIndex, out total);
}
var data = new
{
total,
//序列化之前,先把时间类型转换成Tostring
rows = from u in listUniversityStd select new (u.userID,u.userName,beforetime =((DateTime)u.operatorTime).ToString())
//rows = listUniversityStd
};
return Json(data, JsonRequestBehavior.AllowGet);
}
2、前台转换的方法
为了克服数据中时间为空的情况,我们可以考虑使用前台js解析返回的json数据。
第一步、我们先定义一个方法,使日期列正常显示,js代码如下:
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行编辑时,日期控件内的时间格式正确显示:
$.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一个方法,用于日期显示的格式化
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如下
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>
总结:
在使用第二种方法的时候,可以把前三个步骤,直接放到一个 js中,然后再页面引用这个js, 在你的显示上,写好了页面js的代码,就可以实现日期格式化了。在做着个的过程中,我也请教了很多人,尝试了很多方法,当然,解决问题的方法还有很多,如果您有更好的方法,欢迎沟通!
分享到:
相关推荐
利用System.out.println(jsonJAVA)(EmpServlet.java后台显示如下解决办法:对日期增加一个转换器 <script type
easyui的datagrid的数据渲染
easyui Datagrid 数据列表,功能:条件清空、日期控件datetimebox清空、导出excel、搜索、分页、超链接并传值、数据修改和撤销修改功能
easyui中,datagrid控件中编辑状态(editor)下一列嵌入多个控件的实现方式,详见文件。
纠正easyui的datagrid控件日期列格式显示错误问题。症状:后台返回给页面的数据是Json格式的,其中的日期字段,在后台是“2012-11-10 12:18:00”这样的格式,json序列化后返回到前台页面就被转换成一个像 /Date...
自定义easyui datagrid的行编辑器,实现颜色选择。 依赖类库版本; jquery-1.8.0.js jquery-easyui-1.3.1
项目包含一个可以运行的SSH框架的Javaweb项目。前台部分使用easyUI实现。主要用到了 layout tree datagrid 等控件。有需要的朋友可以,下载学习。
详细讲解Easyui中datagrid控件,编辑模式。扩展编辑器以及扩展验证规则。
列拖动=页面分页=更新单元格列值=添加列合计=列头添加提示(鼠标悬停显示文字)=编辑框键点击事件(暂时实现上下左右控件焦点移动)=设置DataGrid复制右键菜单 默认有复制功能
easyui的输入框+验证+弹窗,datagrid的渲染+勾选/选择+双击+渲染行操作+查询框架。
主要是为了简化开发者在使用easyUI datagrid 控件时需要写的内容太多,对页面需要多个datagrid的方便使用方法!
主要介绍了详解EasyUi控件中的Datagrid的相关资料,需要的朋友可以参考下
本资源主要是使用easyui控件,并结合ASP。net实现datagrid与数据库的连接,数据的增,删,改,分页操作,完成tree加载数据库数据,希望对开发初学者有所帮助
请原谅我最近才认真的使用easyui,以前虽然也用到了,但是只是用到了其简单的ui控件,没有深入的使用像form之类的组件。 最近项目有需要,在使用到数据列表展示的时候,需要添加搜索条件。看了datagrid的api,好像...
主要介绍了jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法,涉及jQuery插件EasyUI相关属性设置技巧,需要的朋友可以参考下
jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染...以上这篇easyui datagrid 表格中操作栏 按钮图标不显示的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
EasyUI DataGrid 增删改查源码,刚了解这个控件,欢迎初学者一起讨论,学习。
第12课(讲解datagrid的formatter的应用,格式化时间、行样式、列样式、表头居中,内容居右等应用)(formatter的提示功能,由于录制问题,没有录制到提示信息,所以大家自己去测试一下吧,不能重新录制了。) 第13课...
treegrid:修复“getChecked”方法不能正确的返回被选择的行的问题; tree:修复在“onlyLeafCheck”属性为true时,复选框无法在异步树种正确显示的问题。 Improvement(改进) treegrid:所有的选择和选中的...