JqGrid zebra/alt строки фона не работают из-за UI Тематический класс

Ответ 1

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

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

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

Один из самых естественных способов сделать четные строки разными, поскольку нечетные строки - это использование другого цвета фона. Проблема заключается в том, что класс ui-widget-content использует фоновое изображение, определенное с помощью стиля background CSS, поэтому самый основной параметр background-color не будет работать. Чтобы устранить проблему, нужно сделать одну из вещей: 1) удалить ui-widget-content class 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 для каждой темы, которая вы разрешите выбирать.

ОБНОВЛЕНО. Только что видел, что я забыл включить ссылку на демонстрационный файл, демонстрирующий, что я написал вживую. Демо здесь.

Ответ 2

Per Олег.. в 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;  }

Ответ 3

вот мое решение:

altRows     : true,
altclass    : 'oddRow',

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

он работал у меня и может использоваться с любой ui-темой.

Ответ 4

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