jqgrid. change theme

问题:

How can i change the look of the jqgrid without changeing the stylesheet. Basically im using jqueryui to style my site but i want to use different background images for just the grid. Is this possible?

回答1:

Is it that you want to apply several jQueryUI themes to the same page, and have jqgrid use one of them while having other elements in your page use the other?

You may want to look at this page which discusses how to add scope (I'm assuming the easy way is to have the rest of your page use the manually scoped theme, and have jqgrid use the "default" scope, unless you want to dig into the jqgrid jquery extension code to see how to use a custom scope)

回答2:

I haven't done this, but the strategy that I would use would be to define some alternate styles for your grid, keeping the same basic CSS definition layout that jQuery UI uses, but redefining the style content the way you want it. I'd make sure that these styles are included after the jQuery UI style sheet. Then I would use javascript on document load to go and apply the new CSS classes to elements of the jqGrid that have the matching jQuery UI classes to your styles.

I think it will be a major pain as there are many classes and I'm not sure that I would do it since sort of defeats the purpose of having a theme.

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

回答3:

This function removes all (at least almost all) the jquery ui candy

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