jqgrid zebra/alt列の背景UIテーマクラスのために機能しない

StackOverflow https://stackoverflow.com/questions/4369899

  •  09-10-2019
  •  | 
  •  

質問

jqgridでZebraストライピングを動作させることはできません。

を使用しております altclassとaltrows - 問題が表示されます ui-widget-content jquery uiのクラスにはaがあります background Altclassのオーバーライドを設定します background 設定。何か案は？

アップデート: ：以下の両方の回答。 Oleg'sは、はるかにクリーンなソリューションです。

Olegのソリューションが機能するためには、jquery UI CSSクラスをjQuery UIとCustom Alt rowsクラスの両方がバックグラウンドプロパティを定義し、 最後のクラスで定義された勝利.

役に立ちましたか？

解決

jqgridは、jquery ui class 'ui-priority-condary'をデフォルト値として使用します altclass パラメーター。クラスはで説明されています jQuery UIドキュメント なので

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

ゼブラ縞模様の説明ではなく、使用できる標準クラスはそれほど多くありません。残念ながら、「ui priority-condery」を持つ行でさえ、ほとんどのテーマの奇妙な行とそれほど違いはありません。視認性を向上させるために した方が良い クラスを定義します altclass 手動で。

奇妙な行は異なる背景色の使用であるため、行を違うと見た最もネイティブな方法の1つです。問題はそれです ui-widget-content クラスで定義された背景画像を使用します background CSSスタイル、だから最もネイティブな設定 background-color 動作しないでしょう。問題を修正するには、物事からそれを行う必要があります1）削除 ui-widget-content クラス2）使用します background 代わりにCSSスタイル background-color 2）使用します background-image:none と一緒に background-color スタイル。これを行う最も簡単な方法は、あなたのカスタムを定義することです AltRowClass なので 

.myAltRowClass { background: #DDDDDC; }

また

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

そして、使用します altRows:true と altclass:'myAltRowClass' jqgridのパラメーター。

別の方法は、同じことをすることです それなし altRows と altclass パラメーター：

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

ケースでは、均等な行をホバリングまたは選択する際にいくつかの小さな欠点があります。次のコードはよりうまく機能しますが、同じことをします altRows:true と altclass:'myAltRowClass' 行う：

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

背景の色と他のCSSスタイルの原因となる偶数の行に設定できる属性は、使用するテーマから依存するため、Themerollerを使用する場合は選択する必要があります altclass 選択できるすべてのテーマについて。

更新しました: ：私が書いたものをライブで示すデモファイルへのリンクを含めるのを忘れてしまったのを見ました。デモです ここ.

他のヒント

あたり オレグ.. 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;  }

これが私の解決策です：

altRows     : true,
altclass    : 'oddRow',

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

それは私のために機能し、あらゆるUIテーマで使用できます。

次のCSSを補足ファイルに追加して、追加の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);
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top