将样式应用于 jqgrid

Question

我正在使用免费的 jqgrid（最新版本）

我从演示中看到的是网格是蓝色的。

我在我的应用程序中使用过它，不确定缺少什么，但网格显示为灰色。我还应用了 guiStyle: "bootstrap" 但这也只是改变了很少的外观和字体，但没有改变颜色。同样在搜索对话框中，控件彼此对齐，就像它们在一起一样。全部见下图 link。

https://imgur.com/a/kzCJ3

如何将颜色更改为默认蓝色
如何修复搜索对话框控件
如何将任何其他自定义样式格式应用于此。

谢谢

----------------已更新----------------

 <link href="/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" /> (bootstrap 4.0.0) 
 <link href="~/lib/free-jqgrid/css/ui.jqgrid.css" rel="stylesheet" /> (4.15.2)
 <link href="~/lib/jquery-ui/themes/base/jquery-ui.min.css" rel="stylesheet" />
 <link href="~/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
 <link href="~/lib/select2/dist/css/select2.min.css" rel="stylesheet" />

 @section scripts{
<script src="~/lib/jquery/dist/jquery.min.js"></script>   
<script src="~/lib/free-jqgrid/dist/modules/grid.base.js"></script>
<script src="~/lib/free-jqgrid/dist/modules/grid.common.js"></script>
<script src="~/lib/free-jqgrid/dist/modules/grid.formedit.js"></script>
<script src="~/lib/free-jqgrid/dist/modules/grid.filter.js"></script>
<script src="~/lib/jquery-ui/jquery-ui.min.js"></script>
<script src="~/lib/select2/dist/js/select2.min.js"></script>
<script src="~/lib/free-jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="~/lib/free-jqgrid/js/jquery.jqgrid.min.js"></script>

除了上面 css/js 之外，我没有 applying/using 任何样式，并且在下面添加：

  guiStyle: "bootstrap",
  iconSet: "fontAwesome",

Answer 1

我建议您更准确地指定您的工作（通过演示）和您想要的内容。

在回答你的问题之前，我想说的是，你真的不需要为 jqGrid 使用 jquery-ui.min.css 是你使用 guiStyle: "bootstrap".

Bootstrap 4 和 Bootstrap 3 的 CSS 设置不同。如果你使用带有 Bootstrap 4 thenb 的免费 jqGrid，你必须使用 guiStyle: "bootstrap4" 而不是 guiStyle: "bootstrap"。以 https://jsfiddle.net/ovq05x0c/1/ 为例。

如果您包含 jquery.jqgrid.min.js，那么您不需要包含 grid.base.js、grid.common.js、grid.formedit.js、grid.filter.js 以及您需要的任何方式包括 i18n/grid.locale-en.js，因为它是 jquery.jqgrid.min.js 或 grid.base.js 的一部分。如果您自己不使用 jQuery UI，则也不需要文件 query-ui.min.js。

最佳做法是从 CDN 加载所有 CSS 和 JavaScript 文件，而不是从本地服务器加载。本地服务器可能仅适用于本地应用程序，但不适用于可从 Internet 访问的端。有关使用来自 CDN 的免费 jqGrid 的更多信息，请参阅 the article。

我建议您阅读 the article 作为使用免费 jqGrid 的起点。它提供了一些自定义网格的示例。例如，CSS 规则

.ui-jqgrid.ui-jqgrid-bootstrap {
    border: 1px solid #003380;
}

更改网格外 div 边框的颜色，CSS 规则

 .ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-caption {
    background-color: #e6f0ff;
}

更改 caption/title 的背景颜色。又一条 CSS 规则

.ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-hdiv {
    background-color: #cce0ff;
}

更改列的背景颜色 headers。您可以用同样的方式自定义 jqGrid 的任何其他元素。演示 https://jsfiddle.net/OlegKi/90qmjean/7/ 是在免费的 jqGrid 和 select2 中更改一些颜色和字体大小的示例，您可能也用过。

将样式应用于 jqgrid

Applying style to jqgrid

jquery

jqgrid

free-jqgrid