Фон jqGrid zebra/alt rows не работает из-за класса темы пользовательского интерфейса

jqGrid использует класс пользовательского интерфейса jQuery 'ui-priority-secondary' в качестве значения параметра altclass по умолчанию. Этот класс описан в документации пользовательского интерфейса jQuery как

Класс, применяемый к кнопке с приоритетом 2 в ситуациях, когда требуется иерархия кнопок. Применяет текст обычного веса и небольшую прозрачность к элементу.

Это, конечно, не точное описание полосы зебры, но стандартных классов, которые можно использовать, не так много. К сожалению, четные строки с 'ui-priority-secondary' выглядят не так уж сильно отличающимися от нечетных строк в большинстве тем. Таким образом, чтобы улучшить видимость, нужно определить класс altclass вручную.

Один из самых нативных способов сделать так, чтобы четные строки выглядели иначе, чем нечетные, — это использование другого цвета фона. Проблема в том, что класс ui-widget-content использует фоновое изображение, определенное в стиле background CSS, поэтому самая родная настройка background-color не будет работать. Чтобы решить проблему, нужно сделать одно из следующих действий: 1) удалить класс ui-widget-content 2) использовать стиль CSS background вместо background-color 2) использовать background-image:none вместе со стилем background-color. Самый простой способ сделать это — определить свой собственный AltRowClass как

.myAltRowClass { background: #DDDDDC; }

or

.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");}
    );
}, 

это сработало для меня и может быть использовано с любой темой пользовательского интерфейса.

Я добавил следующий 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);
}