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

Question

我有一些数据作为时间戳，因此我需要在将其发送给最终用户之前对其进行格式化。我没有找到任何方法来使用来自 jQgrid 的 predefined formatter 来实现这一点。

话虽如此，我正在尝试混合使用 "native" Javascript 和 MomentJS 在显示之前格式化数据。

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

<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 and it works as expected. I have been playing also with momentjs inside jqgrid in this Fiddle 上玩 momentjs，但正如我在这里展示的那样，它不起作用。

问题： 这里的问题是值在 timestamp 列后显示为 string|int网格渲染，这意味着列上的值是时间戳。预期值将是格式化的，无论格式是否正确（这是另一个不同的问题）。

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

有什么想法吗？

Note: Maybe there is an easy way to achieve this using a predefined formatter but I couldn't find it, if you know it let me know

Answer 1

正如 docs 所说：

To print out the value of a Moment, use .format(), .toString() or .toISOString().

您的代码可能如下所示：

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

    return moment(tmp).format();
}

您可以将格式标记传递给 format() or use toISOString() 以符合 ISO 8601 的字符串输出。

请注意，moment 也接受以秒为单位的 Unix 时间戳，因此您可以使用 moment.unix(Number)，在您的情况下：return moment.unix(rowdata.timestamp).format();

Answer 2

你不需要使用moment。只需使用 srcformat u（这是 Unix 时间戳），网格就会完成这项工作

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

Answer 3

要在 jqGrid 中显示时间戳，您可以使用预定义格式器 "date" 而不是自定义 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）。

仅当预定义的格式化程序无法满足您的需求时，才建议使用自定义格式化程序。例如，您可以使用 moment 插件来进行日期的高级格式化。如果你定义了 formatter，你不应该忘记定义 unformatter（unformat 回调函数）。例如，需要编辑数据。

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

How to use external libraries in a custom formatter?

javascript

jquery

jqgrid

momentjs

free-jqgrid