2017-12-27 384 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