如何在自定义格式化程序中使用外部库?

时间:2018-01-15 15:35:07

标签: javascript jquery jqgrid momentjs free-jqgrid

我有一些数据作为时间戳,所以我需要在它转发给最终用户之前对其进行格式化。我没有找到任何方法来使用jQgrid中的predefined formatter来实现这一点。

说过我尝试使用“本机”Javascript和MomentJS混合来格式化数据,然后再显示它。

我做的第一件事是在加载momentjs之前加载库jqgrid

<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="js/jquery-migrate-3.0.1.min.js" type="text/javascript"></script>
<script src="js/moment.min.2.20.1.js" type="text/javascript"></script>
<script src="js/free-jqgrid/jquery.jqgrid.min.js" type="text/javascript"></script>

接下来,我创建了一个要在该列中使用的自定义格式化程序:

$.extend($.fn.fmatter, {
    customTimestampToDate: function (cellvalue, options, rowdata) {
        var parsed_timestamp = parseInt(rowdata.timestamp),
            tmp = new Date(parsed_timestamp * 1000).toISOString();

        console.log(typeof cellvalue); // logs string
        console.log(typeof rowdata.timestamp); // logs string
        console.log(typeof parsed_timestamp); // logs "number"
        console.log(tmp); // logs 2018-01-15T14:19:28.000Z

        return moment(tmp);
    }
});

最后我尝试在colModel中使用自定义格式化程序:

colModel: [
    {name: "act", template: "actions", width: 115},
    {name: "username", search: true, stype: "text"},
    {name: "email", search: true, stype: "text"},
    {name: "first_name", search: true, stype: "text"},
    {name: "last_name", search: true, stype: "text"},
    {name: "company", search: true, stype: "text"},
    {name: "request_uri", search: true, stype: "text"},
    {name: "client_ip", search: true, stype: "text"},
    {
        name: "timestamp",
        search: true,
        stype: "text",
        formatter: "customTimestampToDate"
    }
],

出于某种原因,我得到时间戳值而不是格式化的值,我不知道为什么或如何。

我一直在this Fiddle上玩momentjs,它按预期工作。我一直在this Fiddle内的momentjs内玩jqgrid而且正如我在这里展示的那样无效。

问题:这里的问题是网格渲染后timestamp列上显示为字符串| int 的值,表示该值列是时间戳。如果格式正确,那么预期的值将是格式化的一个并不重要(这是另一个不同的问题)。

我的猜测是,在构建网格时没有加载库或类似的东西,但我完全不确定。

有什么想法吗?

  

注意:也许有一种简单的方法可以使用预定义的格式化程序来实现这一点,但我找不到它,如果你知道它让我知道

3 个答案:

答案 0 :(得分:1)

要在jqGrid中显示时间戳,您可以使用预定义的格式化程序&#34; date&#34;而不是自定义formatter: "customTimestampToDate"。你可以替换

formatter: "customTimestampToDate"

,例如,

formatter: "date", sorttype: "date",
formatoptions: {srcformat: "u", newformat: "n/j/Y g:i:s A"}

srcformat可以是"u""u1000",具体取决于您输入的时间戳。 newformat的默认值为"n/j/Y",但您可以将其更改为其他值。您应该使用PHP格式化语法(请参阅http://php.net/manual/en/function.date.php)。

建议仅在预定义格式化程序无法满足您的需要时才使用自定义格式化程序。例如,您可以使用时刻插件来进行日期的高级格式设置。如果定义unformat,则不应忘记定义unformatter(formatter回调函数)。例如,编辑数据需要它。

答案 1 :(得分:0)

正如docs所说:

  

要打印出片刻的价值,请使用.format().toString().toISOString()

您的代码可能如下所示:

customTimestampToDate: function (cellvalue, options, rowdata) {
    var parsed_timestamp = parseInt(rowdata.timestamp),
        tmp = new Date(parsed_timestamp * 1000).toISOString();

    return moment(tmp).format();
}

您可以将格式标记传递给format()或将toISOString()传递给ISO 8601兼容字符串中的输出。

请注意,片刻也会在几秒钟内接受Unix时间戳,因此您可以使用moment.unix(Number),在您的情况下:return moment.unix(rowdata.timestamp).format();

答案 2 :(得分:0)

你不需要用时间。只需使用srcformat u(这是Unix时间戳),网格就可以完成工作

formatter : 'date', formatoptions : { 
    srcformat : 'u',
    newformat : 'Y-m-d H:i:s'
}