easyUI的列表控件(datagrid)日期列不能正确显示的解决方法

--总结类 同时被 2 个专栏收录
49 篇文章 0 订阅

        一、遇见的问题

        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的代码,就可以实现日期格式化了。在做着个的过程中,我也请教了很多人,尝试了很多方法,当然,解决问题的方法还有很多,如果您有更好的方法,欢迎沟通!

  • 4
    点赞
  • 16
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值