Jquery 编辑时的jqgrid背景色

我可以根据一个值更改单元格的背景颜色。我的问题发生在编辑行时。背景色由“白色”编辑器覆盖（仅适用于可编辑单元格）。请看上面的图片

---

如何使可编辑单元格看起来像“前端”值？

您需要为

输入

控件定义样式。例如，对于名为

myColumn

的列，可以添加以下CSS规则：

input[name="myColumn"] {
    background-color:  green;
}

---

我使用jqGrid演示页面上的示例成功地测试了这一点：

如果我正确地理解了您的问题，您需要在输入字段的初始化过程中以及可能在输入字段的用户键入过程中实施某种验证

您可以使用

dataInit

初始化编辑字段（例如背景色）的参数，并使用事件处理程序监视更改。例如，您可以定义函数

validateElem = function (elem) {
    if (elem.value.length > 4) {
        $(elem).addClass("ui-state-error");
    } else {
        $(elem).removeClass("ui-state-error");
    }
}

它在最多4个字符的字段中设置标准jQuery UI“UI状态错误”类，并删除短输入的类。您可以从

dataInit

和

keyup

调用

validateElem

函数：

editoptions: {
    dataInit: function (elem) {
        validateElem(elem);
    },
    dataEvents: [
        {
            type: 'keyup',
            fn: function (e) {
                validateElem(e.target);
            }
        }
    ]
}

你会看到的

或

同样，您可以设置自定义CSS类中的任何其他类，这些类定义单元格的其他属性，并使用更复杂的验证规则。

此代码适用于：

    loadComplete: function(data){
                $.each(data.rows,function(i,item){
                    for (var j = 4; j <= 12; j++) {
                        testVal = data.rows[i].cell[j];
                        nTestVal = parseFloat(testVal);

                        if(nTestVal == 5){
                            sClassName = $("#" + data.rows[i].id).find("td").eq(j)[0].childNodes[0].className;
                            if (sClassName == "editable")
                                $("#" + data.rows[i].id).find("td input").eq(j-4).css("background", "#F76541");
                            else
                                $("#" + data.rows[i].id).find("td").eq(j).css("background", "#F76541");
                        }
                        else if(nTestVal > 0){
                            sClassName = $("#" + data.rows[i].id).find("td").eq(j)[0].childNodes[0].className;
                            if (sClassName == "editable")
                                $("#" + data.rows[i].id).find("td input").eq(j-4).css("background", "#54C571");
                            else
                                $("#" + data.rows[i].id).find("td").eq(j).css("background", "#54C571");
                        } 
                    }
                });
            }

loadComplete:函数（数据）{
$.each（数据行、函数（i、项）{
对于（变量j=4；j 0）{
sClassName=$（“#”+data.rows[i].id）.find（“td”）.eq（j）[0].childNodes[0].className；
如果（sClassName==“可编辑”）
$（“#”+data.rows[i].id）.find（“td输入”）.eq（j-4）.css（“背景”，“#54C571”）；
其他的
$（“#”+data.rows[i].id）.find（“td”）.eq（j）.css（“background”，“#54C571”）；
} 
}
});
}

---

我知道它有点凌乱和不清楚，所以如果有人想知道详细信息，只需添加注释。

它可以工作，但我仍然需要根据值更改单元格的颜色，因此我必须动态更改规则，并仅更改某些行的背景色。知道怎么做吗？谢谢你的回答。这段代码真的很棒，我真的想在我的应用程序中添加类似的东西。但我之前用loadComplete函数解决了我的问题。@maciek：不客气！您发布的代码假设有人在

gridComplete

中设置了之前已处于内联编辑模式的行。该代码包含许多常数，这些常数取决于列的顺序和代码，如<代码>查找（“TD输入”）。EQ（J-4）而不是<代码>查找（“TD:EQ（+，（J-4）+））输入< /代码>只有在中间所有列都可编辑时，才可工作。此外，值

className

可以是一个字符串，其中多个类被空格分割。因此，我建议您改进代码，使其对

colModel

@maciek中的更改更加稳定：至少我建议您使用列名而不是索引。查看

getColumnIndexByName

函数（参见示例），该函数提供了简单的帮助函数，您可以使用。谢谢您的回答。我用你的建议改进了我的代码。