Javascript 更改jqGrid的样式

我用的是3.5。我是否可以使用jQuery或自定义CSS或其他方法更改网格的样式和外观，使其更加美观？

我相信您可以

您有两个选择：

您可以修改网格的CSS。 如果必须对设计进行小的修改，这将非常有用。 主要的修改不应该这样做，因为JQGrid的CSS类实际上是相互依赖的

或者，您可以从HTML中删除所有样式，并用自己的样式替换它

例如，您有一个JQGrid，如：

HTML

这将生成如下所示的HTML：

<div class="ui-jqgrid-titlebar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix">

..

</div>

等等

创建自己的类后，可以使用以下方法添加到HTML结构中：

JQuery("#list2").addClass(".YourClass");

---

我建议使用这两种技术。

jqGrid 3.5的一个重要特性是与jQuery UI主题的集成。您可以从中生成和/或选择主题。然后只需在页面中添加对它的引用：

<link rel="stylesheet" type="text/css" href="../css/redmond/jquery-ui-1.7.2.custom.css"/>

这将为您提供一个看起来非常好的网格，只需最少的努力

---

这能解决你的问题吗？还是你需要更彻底地改变网格的外观和感觉？

来详细说明Justin Ethier所说的

由于jqGrid使用jQueryUI主题，因此更改网格外观的最佳方法是创建一个自定义的网格

---

我强烈建议你在尝试修改css之前先看看它是否对你有用。。。尽管您也可以这样做，但如果jQueryUI主题外观对您来说过于局限。

您需要动态更改网格标题

这是我的密码

HTML：

为了了解我必须在哪个对象中工作，让我们检查一下JavaScript代码生成的HTML代码：

<div id="gview_jqgrid_ctrs" class="ui-jqgrid-view" style="width: 760px;">
    <div class="ui-jqgrid-titlebar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"></div>
    <div class="ui-state-default ui-jqgrid-hdiv" style="width: 760px;">

我必须选择父div并搜索header div，指定ui jqgrid titlebar类。然后，我删除了原来的ui小部件头类，并替换为我自己的类

$("#gview_jqgrid_ctrs .ui-jqgrid-titlebar").removeClass('ui-widget-header');
$("#gview_jqgrid_ctrs .ui-jqgrid-titlebar").addClass('jqgrid-header');

其中.jqgrid header是以这种方式定义的样式

.jqgrid-header { 
    background:#FF9C00 url(images/new_header_bck.png) repeat-x scroll 50% 50%;
    border:1px solid #4297D7;
    color:#FF0000;
    font-weight:bold;
  }

---

我已经测试过了，效果很好。希望这会有用…

您可以删除所有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");
}

$("[class^='ui-jqgrid']").removeAttr('class');

---

如果网格太大，这可能会有性能问题。

我以一种新的方式修改了jQGrid的css，这也将支持bootastrap设计。要配置这个jQGrid，您需要以下内容

1字型酷炫风格

2 jQGrid最新捆绑包

新设计的jQGrid将如下图所示

---

这里包含了新的完整CSS和完整javascripts编码。

是的，这是一个非常酷的工具，但它有一定的局限性，从那里你无法解决任何样式问题。同意，但它比你从jqGrid中得到的东西要好得多。这取决于你的需要，jQuery主题是否足够好，或者你是否需要滚动你自己的CSS。如果我想在按下add或update按钮时更改JQGrid添加表单的CSS，该怎么办？我可能会问一个问题：如果我想在按下add或update按钮时更改JQGrid添加表单的CSS，该怎么办？只是为了方便起见对于优化，这可以在单个选择器中完成：$gview_jqgrid_ctrs.ui-jqgrid-titlebar.toggleClassui-widget-header jqgrid header；如果我想在按下add或update按钮时更改JQGrid的add表单的css怎么办？如果我想在按下add或update按钮时更改JQGrid的add表单的css怎么办？

<div id="gview_jqgrid_ctrs" class="ui-jqgrid-view" style="width: 760px;">
    <div class="ui-jqgrid-titlebar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"></div>
    <div class="ui-state-default ui-jqgrid-hdiv" style="width: 760px;">

jQuery("#jqgrid_ctrs").removeClass('.ui-widget-header');
jQuery("#jqgrid_ctrs").addClass('.jqgrid-header');

$("#gview_jqgrid_ctrs .ui-jqgrid-titlebar").removeClass('ui-widget-header');
$("#gview_jqgrid_ctrs .ui-jqgrid-titlebar").addClass('jqgrid-header');

.jqgrid-header { 
    background:#FF9C00 url(images/new_header_bck.png) repeat-x scroll 50% 50%;
    border:1px solid #4297D7;
    color:#FF0000;
    font-weight:bold;
  }

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

$("[class^='ui-jqgrid']").removeAttr('class');