jqgrid. change theme

Question

Как изменить внешний вид jqgrid без изменения таблицы стилей. В основном я использую jqueryui для создания своего сайта, но я хочу использовать разные фоновые изображения только для сетки. Это возможно?

Answer 1

ли это, что вы хотите применить несколько тем jQueryUI на ту же страницу, и есть jqgrid использовать один из них, имея другие элементы вашей страницы использовать другие?

Возможно, вы захотите посмотреть на это page which discusses how to add scope (я предполагаю, что простой способ состоит в том, чтобы остальная часть вашей страницы использовала тему с ручным управлением, а jqgrid использовала область «по умолчанию», если вы не захотите вникать в jqgrid код расширения JQuery, чтобы увидеть, как использовать пользовательскую область)

Answer 2

Я не сделал этого, но стратегия, которую я буду использовать, будет заключаться в том, чтобы определить некоторые альтернативные стили для вашей сетки, сохраняя ту же основную схему определения CSS, что и пользовательский интерфейс jQuery, но переопределяя содержимое стиля так, как вы хотите Это. Я бы удостоверился, что эти стили включены после таблицы стилей jQuery. Затем я бы использовал javascript для загрузки документов и применил новые классы CSS к элементам jqGrid, которые имеют соответствующие классы пользовательского интерфейса jQuery для ваших стилей.

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

.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"); 
    }