jqGrid фон строк зебра / альт не работает из-за класса UI Theme - PullRequest
Новая
       43

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

12 голосов
/ 06 декабря 2010

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

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

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

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

Ответы [ 4 ]

29 голосов
/ 08 декабря 2010

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

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

3 голосов
/ 06 декабря 2010

За Олег .. в 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;  }
1 голос
/ 02 мая 2013

Я добавил следующий 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);
}
1 голос
/ 30 сентября 2011

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

altRows     : true,
altclass    : 'oddRow',

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

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

...