Question

我可以根据值更改单元格的背景颜色。编辑行时出现问题。背景颜色由“白色”编辑器覆盖（仅适用于可编辑单元格）。请参阅http://i.stack.imgur.com/pJewM.png

上的图片

如何让我的可编辑单元看起来像“前端”值？

Answer 1

您需要为input控件定义样式。例如，对于名为myColumn的列，您可以添加以下CSS规则：

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

我使用jqGrid演示页面上的示例成功测试了这个：http://trirand.com/blog/jqgrid/jqgrid.html

Answer 2

我理解你的问题，你需要在输入字段的初始化期间实现某种验证，并且可能在用户输入输入字段期间实现。

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

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

在字段中设置标准jQuery UI“ui-state-error”类，其中包含4个字符，并删除短输入的类。您可以通过validateElem和dataInit：

调用keyup个功能

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

在the demo上你会看到

enter image description here

或

enter image description here

以同样的方式，您可以设置定义其他属性的自定义CSS类，并使用更复杂的验证规则。

Answer 3

此代码有效：

    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");
                        } 
                    }
                });
            }

我知道它有点混乱且不清楚，所以如果有人想知道细节，只需添加评论。

编辑时的jqgrid背景颜色

3 个答案: