將樣式應用到jqgrid

Question

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

我從演示中看到的是網格是藍色的。

我已經在我的應用程序中使用這個，不知道有什麼缺失，但網格出現灰色。我也應用了guiStyle：「bootstrap」，但這也只是改變了外觀和字體，而不是顏色。同樣在搜索對話框中，控件相互對齊，就像它們都在一起。請參閱下面的圖片鏈接。

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

我建議您指定更準確地說你做什麼（演示的），你想什麼有。

在回答你的問題之前，我想說一句，你並不需要使用jquery-ui.min.css，因爲jqGrid是你使用的guiStyle: "bootstrap"。

Bootstrap 4和Bootstrap 3的CSS設置不同。如果您使用Bootstrap 4然後使用免費的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; 
} 

改變標題/標題的背景顏色的邊框的顏色。多一個CSS規則

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

更改列標題的背景顏色。以同樣的方式，您可以自定義jqGrid的任何其他元素。演示https://jsfiddle.net/OlegKi/90qmjean/7/是在免費jqGrid和select2中更改一些顏色和字體大小的示例，您可能也會使用它。