2017-12-27 274 views
0

我正在使用免費的jqgrid(最新版本)將樣式應用到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", 
+0

請提供演示(或演示),演示您包含哪些CSS和JavaScript文件以及使用哪些選項。你只使用Bootstrap CSS(Bootstrap 3或Bootstrap 4),只使用jQuery UI CSS還是兩者兼而有之?如果你使用默認的Bootsrap CSS,那麼大多數顏色都是灰色的。您可以輕鬆更改網格中幾乎任何元素的顏色或背景顏色,但您應該準確指定您需要的內容。諸如「我如何將顏色更改爲默認藍色」這樣的語句幾乎沒有提供任何信息,因爲您沒有指定網格的任何確切元素(數據,列標題,尋呼機...)。 – Oleg

+0

已更新問題 – aman

回答

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.jsgrid.common.jsgrid.formedit.jsgrid.filter.js並在你需要包括i18n/grid.locale-en.js因爲它的jquery.jqgrid.min.jsgrid.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中更改一些顏色和字體大小的示例,您可能也會使用它。

+0

感謝Oleg。我已根據您的建議進行了更改,並將改變樣式。這裏只有一件事。早些時候我有guiStyle:「bootstrap」,並且在選擇一行後,更改爲guiStyle:「bootstrap4」後,選定的行顏色不會更改。如果我將它改回「bootstrap」,我可以看到選定的行顏色改變。我也嘗試添加.ui-jqgrid-btable .ui-state-highlight {background}:yellow; }根據你的一篇文章,但這也沒有效果。 – aman

+0

@aman:如果您報告問題或錯誤,請提供* always *演示。我在我的答案中包含了https://jsfiddle.net/ovq05x0c/1/ demo,它使用bootstrap 4.0.0-beta.2的'guiStyle:「bootstrap4」'和免費的jqGrid 4.15.2。我發現在演示中選擇行沒有問題。 – Oleg

+0

對不起,在我結束時有一個問題。雖然我已經將引導程序更新爲4,但仍然引用了3.我不得不刪除緩存,重新啓動瀏覽器等。另外還有一種想法,在我的項目中,我們使用一些點劃線CSS來設計側面和頂層菜單。如果我使用引導程序4,那麼它會弄亂它。但它可以很好地與bootstrap 3更新回去。現在用bootstrap 3我的網格工作正常,但它只是我必須寫guiStyle:「bootstrap」而不是guiStyle:「bootstrap3」。當我再次編寫bootstrap 3時,我的頁面混亂了。 – aman