如何更改jqgrid中唯一的一行背景

Posted 2021-04-19

我要更改基于行的列值的背景颜色。

在第一次加载表时，它由rowattr完成。

编辑列后，如何在不重新加载表的情况下根据列更改行背景？

答案

已知编辑数据的问题。解决方案取决于使用的jqGrid的版本和分支，或者使用的编辑模式。

如果你使用free jqGrid fork，那么可以使用afterSetRow回调，它将在任何更改行（内联或表单编辑）后调用。以下代码为afterSetRow

afterSetRow: function (options) {
    if (options.localData.closed) {
        $(options.tr).addClass("ui-state-error ui-state-error-text");
    } else {
        $(options.tr).removeClass("ui-state-error ui-state-error-text");
    }
}

可以用于额外的rowattr

rowattr: function (item) {
    if (item.closed) {
        return {
            "class": "ui-state-error ui-state-error-text"
        };
    }
}

请参阅演示https://jsfiddle.net/k5j2ojx2/。您可以尝试编辑关于内联编辑按钮（fomatter: "actions"）的行，通过表单编辑或导航栏的内联编辑按钮（由navGrid和inlineNav添加）。如果要更改Closed列的复选框，则行的颜色也将更改。

更新：如果您使用单元格编辑，那么您应该使用afterSaveCell回调。例如，

afterSaveCell: function (rowid, name, value, iRow, iCol) {
    if (name === "closed") {
        if (value === "true") {
            $(this.rows[iRow]).addClass("ui-state-error ui-state-error-text");
        } else {
            $(this.rows[iRow]).removeClass("ui-state-error ui-state-error-text");
        }
    }
}

见https://jsfiddle.net/k5j2ojx2/1/