jqgrid Zebra / Alt Rows Background не работает из-за класса темы пользовательского интерфейса

Question

Мы не можем заставить Zebra Striping работать в jqgrid.

Мы используем Altclass и Altrows. - Проблема, кажется, ui-widget-content класс от jquery ui имеет background настройка, которая является переопределением нашего Altclass background параметр. Любые идеи?

---

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

Для решения Олега для работы ваш класс Altrows должен быть определен после включения класса CSS jQuery ui, как как jQuery ui, так и пользовательские классы alt alt alt, определяют свойство фона и Последний класс определен выигрывает.

Answer 1

JQGRID Используйте jQuery ui класс 'ui-приоритет - вторичный "как значение по умолчанию altclass параметр. Класс описаны в JQuery UI Документация в виде

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

Это вызывает не именно описание полосы Zebra, но не так много стандартных классов, которые можно использовать. К сожалению, даже строки, имеющие «UI-приоритет - вторичный», выглядят не так отличаются от нечетных строк в большинстве темов. Так что улучшить видимость один придется определить класс altclass вручную.

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

Обновленный: Просто видели, что я забыл включить ссылку на демонстрационный файл, который продемонстрирует то, что я писал в прямом эфире. Демо есть здесь.

Answer 2

Нами Олег.. в 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;  }

Answer 3

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

altRows     : true,
altclass    : 'oddRow',

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

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

Answer 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);
}