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

时间:2017-03-18 18:43:49

标签: javascript jqgrid

我使用下面的代码创建自定义格式化程序按钮:

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

1 个答案:

答案 0 :(得分: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升级到free 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版本一起使用&lt; 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的网格高度。