jqgrid。更改主題

Question

如何在不更改樣式表的情況下更改jqgrid的外觀。基本上即時使用jqueryui風格我的網站，但我想爲網格使用不同的背景圖像。這可能嗎？

Answer 1

是不是要幾個jQueryUI的主題應用於同一頁，並且有同時具有在頁面其他元素使用其他的jqGrid使用其中之一？

你可能想看看這個page which discusses how to add scope（我假設簡單的方法是讓你的頁面的其餘部分使用手動範圍的主題，並讓jqgrid使用「默認」範圍，除非你想挖掘在jqGrid的jQuery的擴展代碼來看看如何使用自定義的範圍）

Answer 2

我還沒有做到這一點，但我會使用的策略是爲您的網格定義一些替代樣式，保持jQuery UI使用的基本CSS定義佈局，但以您想要的方式重新定義樣式內容它。我會確保這些樣式包含在jQuery UI樣式表之後。然後，我將在文檔加載上使用JavaScript，並將新的CSS類應用於jqGrid中具有匹配的jQuery UI類到您的樣式的元素。

我認爲這將是一個主要的痛苦，因爲有很多課程，我不知道我會這樣做，因爲有點挫敗了主題的目的。

.jqgrid-widget { ... override widget styles ... } 
.jqgrid-widget input, .jqgrid-widget select ... 
.jqgrid-widget-content { ... override widget-content styles ... } 


$(function() { 
    $('#myGrid .ui-widget').addClass('jqgrid-widget'); 
    $('#myGrid .ui-widget-content').addClass('jqgrid-widget-content'); 
    ... 
}); 

Answer 3

此功能刪除所有（至少幾乎所有）的jQuery UI的糖果

/* Remove jquery-ui styles from jqgrid */ 
    function removeJqgridUiStyles(){ 
     $(".ui-jqgrid").removeClass("ui-widget ui-widget-content"); 
     $(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default"); 
     $(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr"); 
     $(".ui-jqgrid-pager").removeClass("ui-state-default"); 
    }