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
easyUI的datagrid控件日期列不能正确显示Json格式数据的解决方案的更多相关文章
- easyUI的datagrid控件日期列格式化
转自:https://blog.csdn.net/idoiknow/article/details/8136093 EasyUI是一套比较轻巧易用的Jquery控件,在使用过程中遇到一个问题,它的列表 ...
- easyui 中Datagrid 控件在列较多且无数据时,列显示不全的解决方案
在onLoadSuccess 中加入如下代码就OK啦 $('#dg3').datagrid({ onLoadSuccess:function(data){ if(data.total==0){ var ...
- EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性
EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager impl ...
- EasyUI:datagrid控件简介
EasyUI:datagrid控件简介 1,水平滚动条属性: //显示滚动条 fitColumns:false //不显示滚动条 fitColumns:true
- EasyUI中datagrid控件的使用 设置多行表头(两行或多行)
EasyUI中的datagrid控件十分强大,能生成各种复杂的报表,现在因为项目需要,需要生成一个表头两行的表,找了一些说明文档,以下用一个实例来说明一下: 第一种方法: $('#divData'). ...
- 关于EasyUI中DataGrid控件的一些使用方法总结
一,DataGrid 控件的工作流程 1,通过JavaScript将一个空白的div美化成一个空白的Datagrid模板 2,Datagrid模板通过制定的Url发送请求,获取数据 ...
- 自定义EasyUI的datetimebox控件日期时间的显示格式(转)
工作中遇到的问题,在此记录一下. 需求:前台页面使用了EasyUI框架,在某一个html页面中要求datetimebox显示格式为年月日和小时,如图所示: 尝试过两种方法,分别如下: 第一种方法: d ...
- DataGrid控件的列
四种列(局限性较大)https://www.cnblogs.com/lonelyxmas/p/9442604.html 更强大的模板列(如控件居中等)https://www.cnblogs.com/l ...
- 基于MVC4+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面
最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...
随机推荐
- Swift 字符串连接
// 使用+直接相加 var i = var str = "Hello" str = str + " jinpangpang" // 可以使用这种方式连接整值 ...
- Swift中子类必须包含的构造器和析构器
import Foundation /* Swift中子类必须包含的构造器 1.Swift允许在父类构造器前添加required关键字, 用于声明所有子类必须包含该required构造器 (如果没有声 ...
- C#读取word模版并对指定域写入数据保存为新word
引用: using System;using System.Collections.Generic;using System.Aspose.Words;using System.Windows.For ...
- OpenSceneGraph FAQ
转自http://www.cnblogs.com/indif/archive/2011/04/22/2024805.html 1.地球背面的一个点,计算它在屏幕上的坐标,能得到吗? 不是被挡住了吗? ...
- java学习笔记 (2) —— Struts2类型转换、数据验证重要知识点
1.*Action.conversion-properties 如(point=com.test.Converter.PointListConverter) 具体操作类的配置文件 2.*Action. ...
- C# XmlSerializer序列化浅析
C# 中使用 XmlSerializer 实现类和xml文件的序列化和反序列化,使用起来非常简单. C# XmlSerializer实现序列化: XmlSerializer xml = new Xml ...
- 让IE支持CSS3圆角的方法
如果要想在IE浏览器中实现圆角的效果,我们一般都会采用圆角图片的方式.用图片的话,基本就跟浏览器没有多大关系了,因为任何浏览器都支持这种方式. 本文我们主要是讲解如果用CSS 3样式表来实现圆角效果, ...
- linux 下进程状态及进程控制
系统状态检测及进程控制1,/proc 是系统的一个窗户,可以透视内核2,建议将hosts里localhost,locahost.locadomain 解析为127.0.0.1 把系统域名解决为局域网的 ...
- WebVR
WebVR 主要面向Web前端工程师,需要一定Javascript及three.js基础:本文主要分享内容为基于three.js开发WebVR思路及碰到的问题:有兴趣的同学,欢迎跟帖讨论. 目录:一. ...
- loadView/viewDidLoad/initWithNibName/awakeFromNib/initWithCoder的用法总结
loadView/viewDidLoad/initWithNibName/awakeFromNib/initWithCoder的用法总结 首先,区别程序化初始viewcontroller,半程序化 ...