jqgrid. 테마 변경

Question

스타일 시트를 변경하지 않고 jqgrid의 모양을 어떻게 바꿀 수 있습니까? 기본적으로 내 사이트의 스타일을 지정하기 위해 jqueryui를 사용하고 있지만 격자에 대해 다른 배경 이미지를 사용하고 싶습니다. 이것이 가능한가?

Answer 1

가 같은 페이지에 여러 jQueryUI 테마를 적용하고, 페이지의 다른 요소 다른 사용을하면서 그들 중 하나를 사용있는 jqGrid 갖고 싶어인가요?

이 page which discusses how to add scope을 보길 원할 것입니다. (페이지의 나머지 부분에 수동으로 범위가 지정된 테마를 사용하는 것이 가장 쉬운 방법이라고 가정하고 jqgrid가 "기본"범위를 사용하도록 가정합니다. 있는 jqGrid JQuery와 확장 코드는 JQuery와 UI 사탕)

Answer 2

이 작업을 수행하지는 않았지만 사용할 전략은 jQuery UI에서 사용하는 것과 동일한 기본 CSS 정의 레이아웃을 유지하면서 원하는 방식으로 스타일 내용을 재정의하는 것입니다. 그것. 이러한 스타일이 jQuery UI 스타일 시트 뒤에 포함되어 있는지 확인해야합니다. 그런 다음 문서로드시 javascript를 사용하여 스타일에 맞는 jQuery UI 클래스가있는 jqGrid의 요소에 새 CSS 클래스를 적용합니다.

많은 수업이 있기 때문에 큰 고통이 될 것이라고 생각합니다. 주제가있는 목적을 달성하기 위해 일종의 목표를 달성 한 것이 확실하지 않습니다.

.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

이 기능은 모든 (적어도 거의 모든 제거) 사용자 지정 범위를 사용하는 방법을 볼 수

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