jqGrid фон строк зебра / альт не работает из-за класса UI Theme

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

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

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

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

Источник

4 ответа

Решение

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 класс 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 для каждой темы, которую вы позволите выбрать.

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

Источник

За Олега.. в загрузке

$.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;  }
Источник

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

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

altRows     : true,
altclass    : 'oddRow',

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

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

Источник
Другие вопросы по тегам