jqGrid: изменить фон Изображение в заголовке сетки

Question

У меня есть jqGrid, и он поставляется с фоновым изображением по умолчанию, я хочу изменить его фоновое изображение. Я попробовал несколько способов, как это было предложено в онлайн

МЕТОД 1. Я добавил ниже код в моем CSS

.ui-jqgrid .ui-widget-header 
{ 
    background-image:url(images/my-header.png) repeat-x !important; 
} 

МЕТОД 2.Added ниже код для загрузки полного событию jqGrid

loadComplete: function() { 
    $("#gview_jqgCUST .ui-jqgrid-titlebar").removeClass('ui-widget-header'); 
    $("#gview_jqgCUST .ui-jqgrid-titlebar").addClass('jqgrid-header'); 
} 

в CSS Я добавил

.jqgrid-header{ 
    background:red url(images/my-header.png) repeat-x scroll 50% 50%; 
    border:1px solid black; 
    color:Blue; 
    font-weight:bold; 
} 

и я загружаю файлы css после файла jqGrid css, но не смог его достичь

Как это сделать? Любой образец кода, пожалуйста ... Я новичок в jqGrid и jQuery ..

Answer 1

Прежде всего, вы можете использовать ThemeRoller пользовательского интерфейса jQuery, чтобы настроить тему, которую вы используете на странице. Вы можете уменьшить применение темы только к paer вашей страницы с помощью «CSS Scope» (см. the answer).

В качестве альтернативы вы можете указать background из .ui-jqgrid .ui-widget-header. The demo использует the background из темы "Dot Luv". Дополнительно к background Я определил цвета текста и границы, чтобы улучшить внешний вид заголовка. Я использовал CSS

.ui-jqgrid .ui-widget-header { 
    border: 1px solid #0b3e6f; 
    background: #0b3e6f url(http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/dot-luv/images//ui-bg_diagonals-thick_15_0b3e6f_40x40.png) 50% 50% repeat-x; 
    color: #f6f6f6; 
} 

Полученная сетка выглядит как на картинке ниже