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

Мы не можем заставить zebra striping работать в jqGrid.

Мы используем altclass и altRows - проблема заключается в том, что класс ui-widget-content из пользовательского интерфейса JQuery имеет параметр background, который переопределяет наш altclass background установка. Любые идеи?

Обновление: оба ниже ответа работают. Олег - самое чистое решение.

Для работы с Олегом ваш класс altRows должен быть определен после включения JQuery UI CSS-класса, так как пользовательский интерфейс JQuery и пользовательский класс alt rows определяют свойство фона и последний класс определил победы.

Ответ 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);
}