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的技术路线,在重 ...
随机推荐
- Java线程同步与死锁认识
讲下自己的认识,算小小的总结吧! synchroized 具有同步线程的功能,它的处理机制类似于给参数里面的对象赋一个标记值,来表明当前状态,当程序里面某个线程执行synchroized里面的代码段时 ...
- oracle nvl()函数在使用中出现的问题
看一条sql select q.*, r.goods_name from (select nvl(t.goods_code, s.goods_code) goods_code, t.buy_open_ ...
- SVN搭建本地版本控制仓库
1.安装TortoiseSVN 2.新建一个文件夹,比如F:\SvnProjectsCfg 3.在F:\SvnProjectsCfg新建一个文件夹project1,右键该文件夹选择“create re ...
- hdu 1711 Number Sequence(KMP模板题)
我的第一道KMP. 把两个数列分别当成KMP算法中的模式串和目标串,这道题就变成了一个KMP算法模板题. #include<stdio.h> #include<string.h> ...
- JavaScript高级程序设计第20章JSON 笔记 (学习笔记)
第二十章 JSON 1.Json 可以表示三种类型的值: 1.简单值: 表示数值:5 表示字符串:“hello wrold”注表示字符串时必须使用双引号 2.对象: {“name”:“mi”,”ag ...
- [Mugeda HTML5技术教程之10]发布内容
动画作品制作好后,就要拿来使用,怎么发布到想要的位置也是动画制作者比较关心的问题.这一节,我们讲述怎样将制作好的动画内容发布到想要的地方.对制作好的内容,可能的使用场景主要有以下三种:直接导出:发布到 ...
- destoon实现调用当前栏目分类及子分类和三级分类的方法
调用当前栏目分类及子分类和三级分类是程序设计里常用的方法,本文就来详细讲述destoon实现调用当前栏目分类及子分类和三级分类的方法.具体操作如下: 在destoon中提供了如下的调用语句: 一级分类 ...
- Swift—属性观察者-备
为了监听属性的变化,Swift提供了属性观察者.属性观察者能够监听存储属性的变化,即便变化前后的值相同,它们也能监听到. 属性观察者主要有以下两个: willSet:观察者在修改之前调用. didSe ...
- forEach遍历对象数组案例
<script> var users = [ {name:'name1',age:21}, {name:'name2',age:22}, {name:'name3',age:23} ]; ...
- layout_gravity与gravity的区别
1:android:gravity 这个是针对控件里的元素来说的,用来控制元素在该控件里的显示位置. 2:android:layout_gravity 这个是针对控件本身而言,用来控制该控件在包含该控 ...