jquery - 編集時のjqgridの背景色

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編集フィールドのパラメーター (背景色など) の初期化とキーアップイベント ハンドラーの変更を監視するために使用できます。たとえば、次の関数を定義できます。

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

4文字以上のフィールドに標準のjQuery UI「ui-state-error」クラスを設定し、短い入力のクラスを削除します。とのvalidateElem両方から関数を呼び出すことができます。dataInitkeyup

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

デモで見る

また

同様に、セルの他のプロパティを定義し、より複雑な検証ルールを使用するカスタム 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");
                        } 
                    }
                });
            }

少し面倒で不明確であることはわかっているので、詳細を知りたい人はコメントを追加してください.