2

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

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

4

3 回答 3

1

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

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

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

于 2012-04-16T13:37:45.747 回答
1

如果我正确理解您的问题，您需要在输入字段的初始化期间以及可能在输入字段中的用户类型期间实现某种验证。

您可以使用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函数：dataInitkeyup

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

在演示中你会看到

在此处输入图像描述

或者

在此处输入图像描述

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

于 2012-04-16T16:14:03.040 回答
0

此代码有效：

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

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

于 2012-04-17T09:40:23.277 回答