当代码在后端生成并作为 jQgrid 中的 JSON 发送到视图时，如何添加自定义格式化程序？

Question

我正在使用 jQgrid，我正在从 PHP 构建它的内容并将其作为 JSON 发送到视图。以下是我目前使用的 PHP 代码片段：

$colFormats[] = [
    'index'     => 'actions',
    'name'      => 'actions',
    'width'     => 70,
    'editable'  => false,
    'formatter' => 'show_btn',
    'sortable'  => false,
    'align'     => 'center'
];

foreach ($classMedata->getFieldNames() as $key => $value) {
    $colFormats[] = [
        'index' => $classMedata->getCollection().'.'.$value,
        'name'  => $value,
        'width' => 100,
    ];
}

return $this->render('IntegrationBundle:api-logs:index.html.twig', [
        'colFormats' => json_encode($colFormats),
        'colNames'   => json_encode($colNames),
]);

这是我在视图中的 Javascript 代码：

<script type="text/javascript">
    var show_btn = function (cellVal, options, rowObject) {
        return '<input style="height:22px;" type="button" value="Show" onclick="" />';
    };

    $(function () {
        $("#grid").jqGrid({
            url: '/sf/api-logs',
            datatype: "json",
            colNames: {{ colNames|raw }},
            colModel: {{ colFormats|raw }},
            width: 980,
            height: 300,
            pager: "#gridpager",
            toppager: true,
            hoverrows: true,
            shrinkToFit: true,
            autowidth: true,
            rownumbers: true,
            viewrecords: true,
            rowList: [10, 20, 50, 100],
            data: [],
            rownumWidth: 50,
            sortable: true,
            jsonReader: {
                root: 'rows',
                page: 'page',
                total: 'total',
                records: 'records',
                cell: '',
                repeatitems: false
            },
            loadComplete: function (data) {
                if (data.records === 0) {
                    $("#load_grid").addClass("info_msg").html($("<span>", {
                        "class": "grid-empty",
                        "text": "No results were found."
                    })).delay(800).fadeIn(400);
                }
            }
        });
    });
</script>

当 PHP 呈现视图时，我可以看到 colNames 和 colModel 的正确 JS 代码：

colNames: ["Actions", "ID", "Object", ...],
colModel: [{
    "index": "actions",
    "name": "actions",
    "width": 70,
    "editable": false,
    "formatter": "show_btn",
    "sortable": false,
    "align": "center"
}, 
{"index": "ApiLogs.id", "name": "id", "width": 100}, 
{"index": "ApiLogs.dataObject","name": "dataObject","width": 100}, ...

但是我没有看到 Actions 列上呈现的按钮，而是看到 undefined 单词。我不确定我的错误在哪里。有什么帮助吗？

我已阅读 the docs and also this post，我认为我做对了，但这不是因为上面解释的问题。

Answer 1

格式化程序最舒服的形式是像formatter: "myFormatter"这样的字符串形式。你知道 "predefined formatters" 像 formatter: "integer"、formatter: "date" 等等。我建议您注册您的自定义格式化程序作为 "predefined formatters" 并将其设置在后端。

为此，您只需扩展

$.fn.fmatter.myFormatter = function (cellValue, options, rowData, addOrEdit) {
    // the code of formatter (the same as the custom formatter)
    return '<input style="height:22px;" type="button" value="Show" />';
};
$.fn.fmatter.myFormatter.unformat = function (cellValue, options, elem) {
    // the code of unformatter, like
    // return $(elem).text();
};

当代码在后端生成并作为 jQgrid 中的 JSON 发送到视图时，如何添加自定义格式化程序？

How to add custom formatter when the code is generated on the backend and sent to the view as a JSON in jQgrid?

javascript

jqgrid

jqgrid-formatter