2010-11-29 288 views
7

jquery-uiの「smoothness」テーマでjqgridを使用していますが、残念なことにこのテーマでは選択した行の背景色が明るすぎるため、背景色を変更して表示します。私はcssでui-state-highlightを変更しようとしましたが(これは重要なオーバーライドです)、これはうまくいきません。これを行うにはCSSの方法がありますか、またはjqgridカスタムフォーマッタが行く方法ですか?選択された行の背景色

答えて

16

クラスui-state-highlightは、background CSS属性を使用します。したがって、小さなトリックはbackground-colorの代わりにbackgroundを使用して背景イメージを削除することです。たとえば、

.ui-state-highlight { background: yellow !important; } 

ライブhereを参照してください。

更新済み!importantを使用する必要はありません。それを、私たちは異なる色を有する選択された行のセルと残りの行のセルに1つの色をしたい場合とし

.ui-jqgrid-btable .ui-state-highlight { background: yellow; } 

または

.ui-jqgrid .ui-state-highlight { background: yellow; } 
+1

ありがとう、それは私が探していたものです! – Jeff

0

ようより具体的なルールを指定するだけで十分です

で次の例ハイライトされた行セルデータは黄色で残りの行はセルデータが青色になります

青色の背景に「holdRow」、黄色の背景に「HighlightHoldRow」の2つのクラスがあるとします。次のコードを使用して、「RowSelect」は行選択時に呼び出されるメソッドです。

我々はFを使用してこのクライアント側イベントを呼び出すことができTrirandグリッド宣言中
.holdRow td { 
font-weight : bold !important; 
color: Blue !important; 
    } 

    .higLightholdRow td { 
font-weight : bold !important; 
color: Yellow !important; 

}

var LastRowId = ""; 
    function RowSelect(id) { 
if (Flag == "TRUE") { 
    var grid = $('#gvName); 
    if (LastRowId != "" && LastRowId != undefined && LastRowId != id) { 
     tr = grid[0].rows.namedItem(LastRowId); 
     $(tr).removeClass("higLightholdRow"); 
     $(tr).addClass("holdRow"); 
     LastRowId = ""; 
    } 
    tr = grid[0].rows.namedItem(id); 
    $(tr).removeClass("holdRow"); 
    $(tr).addClass("higLightholdRow"); 
    LastRowId = id; 
    } 

}

ollowing loc。

ClientSideEvents-RowSelect="RowSelect" 

RowSelect方法は、行の選択時に呼び出され、選択された行が背景として黄色を有し、残りの行は、背景として青色を有することになる

0
jQuery('#jqGrid').find('.ui-state-highlight').css('background', 'skyblue'); 

あなたはこのように追加することができあなたのjqueryファイル

関連する問題