12

jqGrid でゼブラ ストライピングを機能させることができません。

altclass と altRowsを使用します。問題はui-widget-content、JQuery UI のクラスに、backgroundaltclass のbackground設定をオーバーライドする設定があるように見えることです。何か案は？

更新：以下の両方の回答が機能します。Oleg's は、これまでで最もクリーンなソリューションです。

Oleg のソリューションを機能させるには、JQuery UI CSS クラスを含めた後に altRows クラスを定義する必要があります。これは、JQuery UI とカスタム alt rows クラスの両方が background プロパティを定義し、最後に定義されたクラスが wins であるためです。

4

4 に答える 4

30

jqGrid は、パラメータのデフォルト値として jQuery UI クラス 'ui-priority-secondary' を使用しaltclassます。このクラスは、jQuery UI ドキュメントで次のように説明されています。

ボタン階層が必要な状況で、優先度 2 のボタンに適用されるクラス。通常の太さのテキストとわずかな透明度を要素に適用します。

原因は、ゼブラ ストライプの説明とまったく同じではありませんが、使用できる標準クラスはそれほど多くありません。残念ながら、ほとんどのテーマでは、「ui-priority-secondary」を持つ行でも、奇数行とあまり変わらないように見えます。したがって、可視性を向上させるには、クラスaltclassを手動で定義する必要があります。

偶数行を奇数行とは異なるように見せる最もネイティブな方法の 1 つは、異なる背景色を使用することです。問題は、ui-widget-contentクラスが CSS スタイルで定義された背景画像を使用するbackgroundため、最もネイティブな設定background-colorが機能しないことです。問題を解決するには、1)ui-widget-contentクラスを削除する、2)background代わりに CSS スタイルを使用する、 background-color2)スタイルbackground-image:noneと一緒に使用する、のいずれかを行う必要がありbackground-colorます。これを行う最も簡単な方法は、カスタムAltRowClassを次のように定義することです

.myAltRowClass { background: #DDDDDC; }

また

.myAltRowClass { background-color: #DDDDDC; background-image: none; }

次に、jqGrid のパラメーターを使用altRows:trueします。altclass:'myAltRowClass'

もう 1 つの方法は、パラメーターなしで同じことを行うことです。 altRowsaltclass

loadComplete: function() {
    $("tr.jqgrow:odd").css("background", "#DDDDDC");
}

場合によっては、偶数行をホバリングまたは選択する際にいくつかの小さな欠点があります。次のコードはより適切に機能しますが、同じことaltRows:trueをaltclass:'myAltRowClass'行います。

loadComplete: function() {
    $("tr.jqgrow:odd").addClass('myAltRowClass');
}

偶数行に設定できる背景色やその他の CSS スタイル属性は、使用するテーマに依存するため、ThemeRoller を使用する予定がある場合は、選択できるaltclassすべてのテーマを選択する必要があります。

更新: ライブで書いたことを示すデモ ファイルへのリンクを含めるのを忘れていたことがわかりました。デモはこちら.

于 2010-12-07T22:05:13.100 に答える
3

Olegごとに .. loadComplete で:

$.each(grid.getDataIDs(),
    function(index, key){
        if(index % 2 !== 0) {
            var t = $("#" + key, grid);
            t.removeClass('ui-widget-content');
        }
    }
);

そして、グリッド定義で:

altRows:true,
altclass:'myAltRowClass',

「myAltRowClass」の場合:

.myAltRowClass { background: #F8F8F8 ; border:1px solid #DDDDDD;  }
于 2010-12-06T19:47:35.670 に答える
1

ここに私の解決策があります:

altRows     : true,
altclass    : 'oddRow',

gridComplete: function() {
    $(".jqgrow:odd").hover(
        function() { $(this).removeClass("oddRow");}, 
        function(event) { $(this).addClass("oddRow");}
    );
},

それは私にとってはうまくいき、任意のUIテーマで使用できます.

于 2011-09-30T10:49:32.260 に答える
1

I added the following CSS to a supplementary file to style the alternate row and row hover without using additional Javascript:

table.ui-jqgrid-btable tr:nth-child(odd) td{
    background-color: #E7F0FD;
}
table.ui-jqgrid-btable tr:hover:nth-child(odd) td{
    background: url("images/ui-bg_glass_75_dadada_1x400.png") repeat-x scroll 50% 50% rgb(6, 41, 97);
}
于 2013-05-02T19:35:16.453 に答える