编辑时的jqgrid背景颜色答案

【问题标题】：jqgrid background color when editing编辑时的jqgrid背景颜色
【发布时间】：2012-04-27 19:54:09
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

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

我使用 jqGrid 演示页面上的示例成功地对此进行了测试：http://trirand.com/blog/jqgrid/jqgrid.html

【讨论】：

它有效，但我仍然必须根据值更改单元格的颜色，因此我必须动态更改规则并仅更改某些行的背景颜色。知道该怎么做吗？

【解决方案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 个字符，并删除了短输入的类。您可以从dataInit 和keyup 调用validateElem 函数：

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

在the demo 你会看到

或

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

【讨论】：

感谢您的回答。这段代码真的很棒，我真的想在我的应用程序中添加这样的东西。但我之前使用 loadComplete 函数使用自己的解决方案解决了我的问题。
@maciek：不客气！您发布的代码假设有人将行设置为内联编辑模式之前，例如在gridComplete 内部。该代码包含许多常量，这些常量取决于列的顺序，并且像 find("td input").eq(j-4) 这样的代码而不是 find("td:eq("+(j-4)+") input") 仅在中间的所有列也是可编辑的情况下才有效。此外，值className 可以是一个字符串，其中一个类除以空格。所以我建议你改进你的代码，使colModel的变化更加稳定。
@maciek：至少我建议您使用列名而不是索引。查看getColumnIndexByName 函数（例如参见the 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");
                        } 
                    }
                });
            }

我知道这有点混乱和不清楚，所以如果有人想了解详细信息，请添加评论。

【讨论】：