JQGrid 自定义格式化程序按钮在分页后消失

Question

我正在使用以下代码创建自定义格式化程序按钮：

colModel.push({ name : 'Id',index : 'Id', width: 100, sortable: false,
                resizable: false, hidedlg: true, search: false, align: "center",
                fixed: true, viewable: false,
                formatter: function (cellvalue, options, rowObject) {
                    if (rowObject[8] === "Active") {
                        return "<button class=\"resend\">Resend</button>";  
                    } 
                    return "-";
                }
            });

JQGrid代码：

jQuery("#" + gridName).jqGrid({
        url : gridUrl,
        datatype : "json",
        width : 1000,
        height : 200,
        colNames : colNames,
        colModel : colModel,
        rowNum : 20,
        rowList : [ 10, 15, 20 ],
        viewrecords : true,
        pager : "#" + pager,
        multiselect : false,
        loadonce : true,
        repeatitems: true,
        imgpath : "themes/basic/images",
        caption : "",
        beforeSelectRow: function (rowid, e) {            
            return true;
        },
    }).navGrid("#" + pager, {
        edit : false,
        add : false,
        del : false,
        search : false,
        refresh : false
    }, {}, // Default for edit
    {},// Default for add
    {}// Default for delete
    ).navButtonAdd("#" + pager, {
        caption : "Refresh",
        buttonicon : "ui-icon-refresh",
        onClickButton : function() {
            var urlStr = getLastUrl(gridUrl);
            jQuery("#" + gridName).jqGrid('setGridParam', {
                url : urlStr,
                mtype : 'POST',
                datatype : 'json'
            }).trigger("reloadGrid");
            return true;
        }
    }).navButtonAdd("#" + pager, {
        caption : "Export",
        buttonicon : "ui-icon-save",
        onClickButton : function() {
        }
    });

当网格加载时，按钮根据逻辑显示正常，但分页后按钮不显示在网格中。

无法理解发生了什么。如何解决这个问题？

我正在使用

jqGrid 4.0.0 - jQuery Grid

Answer 1

如果你真的需要使用复古版本 4.0.0，它已经死了很多年，那么你可以通过使用来修复你的代码

formatter: function (cellvalue, options, rowObject) {
    // access the data of another column by column index or by column name "getStatus"
    var status = $.isArray(rowObject) ? rowObject[8] : rowObject.getStatus;
    return status === "Active" ? "<button class=\"resend\">Resend</button>" : "-";
}

我强烈建议您将 jqGrid 升级到免费的 jqGrid 4.14.0 和更新的 jQuery 版本（1.7.2 和 3.1.1 之间的任何版本）。 jqGrid 4.0.0 已经 6 岁了。它在 Chrome 10、Firefox 3.5 和 IE8（IE9 刚刚针对 Vista 发布）发布。现在我们有 Chrome 57、Firefox 52、Edge 38、IE11。我只指出一个描述的问题 here，它描述了真正的问题，在使用当前版本 Chrome 的情况下，你在 jqGrid 4.0.0 中遇到了这个问题。如果您使用 jqGrid 4.0.0，那么您也必须使用 jQuery 和 jQuery UI 的复古版本。因为 jqGrid 4.0.0 可以与 jQuery 版本 < 1.6.

一起使用

以上代码可以免费使用 jqGrid（由于兼容性原因），但推荐的用法如下：

formatter: function (cellvalue, options) {
    var status = options.rowData.getStatus;
    return status === "Active" ? "<button class=\"resend\">Resend</button>" : "-";
}

最后，我建议您删除以下 jqGrid 选项：multiselect: false, repeatitems: true, imgpath : "themes/basic/images", caption: "" 错误或包含默认值并添加 gridview: true（这是免费 jqGrid 中的默认值，但不是默认值jqGrid 4.0.0）。您可以考虑使用 height: "auto" 而不是 height: 200 并根据 rowNum.

指定网格的高度

JQGrid 自定义格式化程序按钮在分页后消失

JQGrid custom formatter button vanish after pagination

javascript

jqgrid