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

首先，您可以使用jQuery UI的ThemeRoller來自定義在頁面上使用的主題。您可以通過使用「CSS範圍」（參見the answer）減少僅將主題應用於頁面的頁面。您可以指定background的.ui-jqgrid .ui-widget-header。 「Dot Luv」主題使用the background。附加到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; 
} 

產生的網格看上去像下面的圖片