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

jqGrid的。改变主题

3 个答案: