easyUI的datagrid控件日期列格式化
转自:https://blog.csdn.net/idoiknow/article/details/8136093
EasyUI是一套比较轻巧易用的Jquery控件,在使用过程中遇到一个问题,它的列表控件——datagrid, 在显示日期列的时候,由于后台返回给页面的数据是Json格式的,其中的日期字段,在后台是正常的“2012-11-10 12:18:00”这样的格式,json序列化后返回到前台页面就被转换成一个像 /Date(1419264000000)/的格式,导致easyUI无法解析这个字段。经过一番研究,自己捣鼓出来一个解决方案:
完整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\//, '$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方法。
easyUI的datagrid控件日期列格式化的更多相关文章
- easyUI的datagrid控件日期列不能正确显示Json格式数据的解决方案
EasyUI是一套比较轻巧易用的Jquery控件,在使用过程中遇到一个问题,它的列表控件——datagrid, 在显示日期列的时候,由于后台返回给页面的数据是Json格式的,其中的日期字段,在后台是正 ...
- 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的datetimebox控件日期时间的显示格式(转)
工作中遇到的问题,在此记录一下. 需求:前台页面使用了EasyUI框架,在某一个html页面中要求datetimebox显示格式为年月日和小时,如图所示: 尝试过两种方法,分别如下: 第一种方法: d ...
- 关于EasyUI中DataGrid控件的一些使用方法总结
一,DataGrid 控件的工作流程 1,通过JavaScript将一个空白的div美化成一个空白的Datagrid模板 2,Datagrid模板通过制定的Url发送请求,获取数据 ...
- DataGrid控件的列
四种列(局限性较大)https://www.cnblogs.com/lonelyxmas/p/9442604.html 更强大的模板列(如控件居中等)https://www.cnblogs.com/l ...
- 基于MVC4+EasyUI的Web开发框架经验总结(13)--DataGrid控件实现自动适应宽带高度
在默认情况下,EasyUI的DataGrid好像都没有具备自动宽度的适应功能,一般是指定像素宽度的,但是使用的人员计算机的屏幕分辨率可能不一样,因此导致有些地方显示太大或者太小,总是不能达到好的预期效 ...
随机推荐
- 【原创】大叔经验分享(71)docker容器中使用jvm工具
java应用中经常需要用到jvm工具来进行一些操作,如果java应用部署在docker容器中,如何使用jvm工具? 首先要看使用的docker镜像, 比如常用的openjdk镜像分为jdk和jre,只 ...
- c++ 性能优化策略
c++ 性能优化策略 作者:D_Guco 来源:CSDN 原文:https://blog.csdn.net/D_Guco/article/details/75729259 1 关于继承:不可否认良好的 ...
- javascript立体学习指南
javascript立体学习指南第一章:首先了解javascript 首先,什么是javascript? JavaStrip出生于1995年,是一种文本脚本语言,成都装修公司是一种动态的.弱类型的.基 ...
- vue下载后台传过来的乱码流的解决办法
后台返回的乱码流 解决办法: 请求方式用的是axios,主要加关键的 {responseType: 'blob'} axios封装 export function postDownload(url, ...
- php.ini配置文件参数中文说明文档
转自 https://blog.csdn.net/seoyundu/article/details/101147041 中文翻译php.ini配置文件 [PHP php.ini-dist] ;;;; ...
- python异常:常见异常、处理、断言、自定义异常
一.异常是什么 二.常见异常 三.异常处理 四.不太常用语法 五.主动判处异常 六.断言 七.使用场景 八.自定义异常类型 一.异常是什么 """ 什么是异常? 异常是错 ...
- 配置LANMP环境(7)-- 配置nginx反向代理,与配置apache虚拟主机
一.配置nginx反向代理 1.修改配置文件 vim /etc/nginx/nginx.conf 在35行http下添加一下内容: include /data/nginx/vhosts/*.conf; ...
- python 示例代码1
第一章 python基础一 在此不再赘述为什么学习python这门编程,网上搜索一箩筐.我在此仅说一句python的好,用了你就会爱上它. 本python示例代码1000+带你由浅入深的了解pyth ...
- OI视角浅谈布隆过滤器
简要谈及布隆过滤器 Preface 不负责的出题人扔了一道5e5,2M卡内存的题,标算布隆过滤器,然而std自己用std::set 70M碾过去了. 没学OI时候草草看过这个,不过忘得差不多了. 今天 ...
- k8sStatefulSet控制器
一.StatefulSet概述 应用程序存在有状态和无状态两种类别,因为无状态类应用的pod资源可按需增加.减少或重构,而不会对由其提供的服务产生除了并发相应能力之外的其他严重影响.pod资源的常用控 ...