jqgrid - jqgrid。改变主题

Question

如何在不更改样式表的情况下更改 jqgrid 的外观。基本上我使用 jqueryui 来设置我的网站的样式，但我想对网格使用不同的背景图像。这可能吗？

Answer 1

您是否想将多个 jQueryUI 主题应用于同一页面，并让 jqgrid 使用其中一个，而页面中的其他元素使用另一个？

您可能想查看讨论如何添加范围的此页面（我假设简单的方法是让页面的其余部分使用手动范围的主题，并让 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");
    }