Selected row background color

问题

I'm using jqgrid with jquery-ui 'smoothness' theme, unfortunately with this theme the selected row background color is too light, I'm trying to change the background color to make it more visible. I've tried changing ui-state-highlight in css (with !important override) but this does not work. Is there a CSS way to do this or perhaps a jqgrid custom formatter is the way to go?

回答1:

The class ui-state-highlight uses the background CSS attribute. So a small trick is to use background instead of background-color to remove the background image. For example

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

see live here.

UPDATED: It's not necessary to use !important. It's enough to specify a more specific rule like

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

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

回答2:

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

You can add like this in your jquery file

回答3:

Suppose if we want one color for the selected row cells and remaining rows cells having different color,

In the below example Highlighted row cells data will be in yellow color and remaining rows cells data will be in blue color

Suppose we have two classes with names "holdRow" for blue background and "HighlightHoldRow" for yellow color background then By using the below code "RowSelect" is the method which is invoked during row select,

Consider the following code

   .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;
    }

}

During Trirand Grid Declaration we can call this Client side event using the following loc.

   ClientSideEvents-RowSelect="RowSelect"

The RowSelect method is invoked during the selection of a row,and selected row will have yellow color as background and remaining rows will have blue color as background

来源：https://stackoverflow.com/questions/4305223/selected-row-background-color

标签

jquery-ui

jqgrid