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

问题描述 投票:1回答:1

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

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

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

jquery jqgrid row cell background-color
1个回答
1
投票

已知编辑数据的问题。解决方案取决于使用的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")的行,通过表单编辑或导航栏的内联编辑按钮(由navGridinlineNav添加)。如果要更改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/

© www.soinside.com 2019 - 2024. All rights reserved.