ExtJs6 时间转换为'x天','x小时','x分','x秒前'并且鼠标移上去悬浮提示具体时间

原创于 2016-07-25 11:58:11 发布 · 444 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs

ExtJs6 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用ExtJS框架中的grid组件实现的时间格式化显示方法。通过计算当前时间与记录中时间戳之间的差值，以友好的方式显示为“X天X小时X分钟X秒前”。同时，该方法还提供了原始时间的提示信息。

先看效果：
这里写图片描述

不废话，上代码：
grid部分：
columns : [
    {
        bind : {
            text : '{createtime}'
        },
        dataIndex : 'createtime',
        renderer : 'convertSTime'
    }
]
controller部分：
convertSTime : function(val, metaData, rcd){
    if (val) {
        var now = new Date(), 
            longTime = now.getTime() - val, 
            day = parseInt(longTime/(24 * 60 * 60 * 1000)), 
            hour = parseInt((longTime/(60 * 60 * 1000) - day * 24)),
            min = parseInt(((longTime/(60 * 1000))- day * 24 * 60 - hour * 60)), 
            sec = parseInt((longTime/1000 - day * 24 * 60 * 60 - hour * 60 * 60 - min * 60)), 
            showVal = Ext.Date.format(new Date(val), 'Y-m-d H:i:s'), value = '';
        if (day > 0) {
            value += day + "天";
        }
        if (hour > 0) {
            value += hour + "小时";
        }
        if (min > 0) {
            value += min + "分";
        }
        value += sec + "秒 前";
        metaData.tdAttr =  'data-qtip="' + showVal + '"';
            return value;
    }
}