项目中,前台jqgrid在显示时间时,出现一些问题,弄清楚后记载下来以便碰见同样问题的人
项目中,向jqgrid写出去的是json格式数据,后台是通过jackson对数据格式进行转换的。jagrid时间行代码如下
colModel:[
{name:'id',index:'id', editable:false,hidden:true},
{name:'name',index:'name',label:"角色名", sorttype:"text"},
{name:'createTime',index:'createTime',label:"创建时间", editable:false,formatter:"date",formatoptions: {srcformat:'Y-m-d H:i:s',newformat:'Y-m-d H:i:s'}},
{name:'createBy',index:'createBy',label:"创建人", sortable:false}
],
但在创建时间那一行时间显示为"NaN-NaN-NaN NaN:NaN:NaN" ,后来只带,jaskson默认写出的时间格式是时间戳,在jqgrid里面,用"u" 或"U" 来表示源数据的时间戳格式,因此把以上代码改成如下:
colModel:[
{name:'id',index:'id', editable:false,hidden:true},
{name:'name',index:'name',label:"角色名", sorttype:"text"},
{name:'createTime',index:'createTime',label:"创建时间", editable:false,formatter:"date",formatoptions: {srcformat:'u',newformat:'Y-m-d H:i:s'}},
{name:'createBy',index:'createBy',label:"创建人", sortable:false}
],
改完后,数字是出来了 ,但显示的时间太离谱了,显示为:"44235-11-07 21:10:44" 。 再找资料,才知道,jqgrid主要是支持这php,而php和java在时间戳上有区别, php里面,时间戳用10位数字表示,精确到秒, java里面,时间戳用13位数字表示,精确到毫秒。 才查看jqgrid源码 有那么一段 如下:
if( !isNaN( date - 0 ) && String(format).toLowerCase() == "u") {
//Unix timestamp
timestamp = new Date( parseFloat(date)*1000 );
}
再找,也没看见其他处理时间戳的地方,跟踪js代码,对于从后台拿到的13位时间戳数据也会进入到这里,在乘以1000就编程了16位,这就导致了比原本时间大了很多。 于是乎就修改这一段,如下
if( !isNaN( date - 0 ) && String(format).toLowerCase() == "u") {
//Unix timestamp
timestamp = new Date( parseFloat(date) );
}
修改后,一切显示正常, 如:"2012-04-07 18:13:00" ,
但想着,不能这么去解决问题,这样做,也就意味着到时候换jqgrid js文件时总的改这个地方,修改别人源码,还不知道会出现什么其他问题呢? 知道问题了,那就可以找解决方法了, 主要是在哪一块下手
竟然jagrid对时间戳有这样的处理,对于jaskson是使用,我们项目是封装在一个工具类里面。哪么好,我不向前台给时间戳形式的数据,正好jackson也提供修改时间数据输出格式方法, 于是加了这么一段静态代码,如下:
private static ObjectMapper mapper = new ObjectMapper();
static {
//jackson默认写出的时间数据为时间戳, 这里修改为相应模式的时间数据输出格式
mapper.getSerializationConfig().setDateFormat(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"));
}
前台页面代码如下:
colModel:[
{name:'id',index:'id', editable:false,hidden:true},
{name:'name',index:'name',label:"角色名", sorttype:"text"},
{name:'createTime',index:'createTime',label:"创建时间", editable:false,formatter:"date",formatoptions: {srcformat:'Y-m-d H:i:s',newformat:'Y-m-d H:i:s'}},
{name:'createBy',index:'createBy',label:"创建人", sortable:false}
],
这样后 时间显示一切正常 "2012-04-07 18:13:00"
分享到:
相关推荐
- 自定义列:可以自定义列的宽度、对齐方式、标题、格式化函数等。 - 国际化:支持多语言,可以根据需要加载不同的本地化文件。 6. **事件处理**:jqGrid 提供丰富的事件接口,如 `onSelectRow`、`beforeEditCell...
jqGrid是基于jQuery库的表格插件,它提供了一套完整的解决方案,包括数据的加载、排序、筛选、分页、编辑以及格式化等。jqGrid支持多种数据源,如JSON、XML、HTML、CSV等,能够无缝集成到各种Web项目中。其核心功能...
这些插件可能用于格式化时间数据,或者提供时间选择器以便用户方便地输入或选择时间。在提供的示例中,你将学习如何集成时间插件,以及如何自定义其样式和行为。 4. 表格配置:jqGrid允许你对表格进行详细的配置,...
可以使用`formatter`选项来定义单元格的显示方式,例如,你可以创建一个自定义的日期格式化函数,将服务器返回的时间戳转换为人类可读的日期格式。同时,如果你需要日期选择器,可以利用jQuery UI的日期选择器插件,...
2. **列自定义**:用户可以根据需求自由定义列的显示方式,包括宽度、对齐方式、可编辑性等,同时支持自定义列头和格式化数据。 3. **编辑功能**:jqGrid支持行内编辑、弹出式编辑和批量编辑,方便用户对数据进行增...
集成的日期选择控件是jqGrid提升用户体验的一个重要工具,它为含有日期字段的列提供了直观的日期选择界面,避免了用户手动输入日期的不便。 在"jqgrid_demo36"中,我们可以预见到这个演示将展示如何配置和使用上述...
- **`ajaxArrivalDate`**:日期格式化处理函数。 - 使用`<input>`元素来展示日期,并通过`datepicker`插件增强用户体验。 - **`ajaxArrival`**:文本输入格式化处理函数。 - 通过`<input>`元素展示文本,并添加...
6. **数据格式化**:jqGrid 提供了多种内置的数据格式化器,如日期、数字等,也可以自定义格式化函数。 7. **导出功能**:支持将表格数据导出为 CSV、Excel 或 PDF 格式,便于数据分析或打印。 8. **响应式设计**...
此外,格式化功能允许开发者自定义单元格的显示样式,可以处理日期、数字等复杂数据类型。自定义按钮则扩展了 jqGrid 的功能,可以添加额外的操作,比如导出数据、触发特定函数等。 在翻页方面,jqGrid 提供了分页...
jqGrid 是一个基于 jQuery 的数据网格插件,用于在网页上展示和操作大量结构化数据。在"jqgrid celledit"的上下文中,我们主要关注的是jqGrid的单元格编辑功能,这是一个允许用户直接在表格中编辑单个单元格的数据的...
除此之外,这个目录还可能包含一些辅助脚本,比如本地化文件(用于处理日期、时间格式等)和扩展功能的插件。 3. **src**:这个目录可能包含了jqGrid的源码文件,对于开发者来说,这是一个宝贵的资源,因为它允许...
这包括日期格式化、货币格式化或者自定义HTML内容。此外,`colModel`配置项用于定义列的属性,如宽度、对齐方式、是否可编辑等。 3. **交互性**:jqGrid提供了丰富的交互功能,如点击行选中、行编辑、行删除、...
jqGrid是一款基于jQuery的开源数据网格插件,用于在网页上展示和操作表格化的数据。这个"jqGrid demo"包含了两个主要的压缩包文件:`jquery.jqGrid-4.4.3.zip` 和 `jquery-ui-1.9.2.custom.zip`,以及一个名为“demo...
在实际开发中,jqGrid 还支持本地化,即可以根据不同地区的语言和文化习惯显示日期、数字格式等。此外,jqGrid 提供了详细的文档和示例,帮助开发者快速理解和应用各种功能。 总之,jqGrid Theme1.12.1 是一个专业...
jQuery UI 1.8.23 则是与jQuery配套的用户界面库,它包含了一些可自定义的UI组件,如对话框、日期选择器、拖放功能等,这些组件在jqGrid中可以用于创建更友好的交互体验。 **HTML5 支持** 随着HTML5的普及,jqGrid...
使用jqGrid时,开发者通常会根据需求选择性地引入所需的JS文件,以减少不必要的加载时间。同时,通过设置jQuery对象的选择器,可以指定表格元素,并用jqGrid的方法来初始化和配置表格。 例如,创建一个jqGrid的基本...
- **自定义列**:利用`formatter`函数可以自定义列的显示方式,例如日期格式化、链接生成等。 - **树形网格**:通过`treeGrid`和`parentField`等参数,可以把数据以树形结构展示。 5. **jqGrid扩展** - **jqGrid...
- 使用 JavaScript 初始化 jqGrid,配置表格的列、数据源、分页等参数。 - 可选:根据需求,添加自定义插件或调整样式。 5. **注意事项**: - 在使用 jqGrid 时,需要确保浏览器支持 jQuery,因为 jqGrid 是构建...
此外,它还支持自定义格式化类型,这意味着可以对单元格数据进行特定的显示和处理,例如日期格式化、货币格式化等。对于需要用户交互的功能,如编辑和删除记录,jqGrid 也提供了相应的API和事件,开发者可以通过监听...
6. **自定义列**:用户可以根据需求调整列的显示,包括宽度、隐藏、格式化等。 7. **主题支持**:jqGrid提供多种预设主题,可以通过简单的配置改变界面风格,以适应不同的项目需求。 8. **国际化**:jqGrid支持多...