在jqgrid中应用样式

Question

我正在使用免费的jqgrid (最新版本)。

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

我已经在我的应用程序中使用了这一点，不确定遗漏了什么，但是网格显示为灰色。我还应用了guiStyle：“引导”，但这也只是改变了外观和字体，但没有改变颜色。此外，在“搜索”对话框中，控件彼此对齐，就像它们都在一起一样。请参阅下面的所有图片链接。

https://imgur.com/a/kzCJ3

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

谢谢

更新？？更新？

 <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之外，我不应用/使用任何样式，如下所示：

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

Answer 1

我建议您更准确地指定您所做的(使用演示)和您想要的内容。

在回答你的问题之前，我想说的是，你真的不需要在jqGrid上使用jqGrid--你使用的是guiStyle: "bootstrap"。

引导4和引导3的CSS设置是不同的。如果你使用免费的jqGrid和引导带4，那么你必须使用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的一部分。如果您自己不使用query-ui.min.js UI，那么也不需要文件jQuery。

最佳做法是从CDN加载所有CSS和JavaScript文件，而不是从本地服务器加载。本地服务器可能只适用于本地应用程序，但不适用于从Internet获得的端。有关使用CDN中的免费jqGrid的更多信息，请参见文章。

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

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

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

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

更改标题/标题的背景色。另一条CSS规则

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

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