jQuery 如何更改jqGrid的主题？

How to change the theme of the jqGrid?

提问by Nam G VU

I'm looking for the way to change jqGrid theme for the current version. I've started to use jqGrid in my ASP.Net MVC 2 application recently and download some demo solution/projects. I tried to change the theme of the grid by changing the theme ui javascript but it doesn't work for me. Looking at the documentdoesn't help me much!

我正在寻找更改当前版本的 jqGrid 主题的方法。我最近开始在我的 ASP.Net MVC 2 应用程序中使用 jqGrid 并下载一些演示解决方案/项目。我试图通过更改主题 ui javascript 来更改网格的主题，但它对我不起作用。查看文档对我没有多大帮助！

How are you changing the jqGrid's theme? I'm looking for:

你如何改变 jqGrid 的主题？我在找：

1. List of css files that used to set up the ui of the grid.
2. Steps to change a theme to a new theme
3. Prefer to refer to the theme by online .css/.js url - so as to update the theme to latest version automatically

1. 用于设置网格 ui 的 css 文件列表。
2. 将主题更改为新主题的步骤
3. 喜欢通过在线 .css/.js url 引用主题 - 以便自动更新主题到最新版本

回答by UdayKiran Pulipati

jQuery user interface ThemeRollerprovides 24 themes.

jQuery 用户界面ThemeRoller提供 24 个主题。

1. For changing jqgridtheme simply download Redmond(Scroll down and select theme click Download button) theme by selecting Gallerytab then click on Calendarimage for preview the themethen click on Downloadbutton for downloading.
2. Extract the downloaded file jquery-ui-1.10.4.customand paste it under themes -> redmondfolder.

1. 要更改jqgrid主题，只需下载Redmond（向下滚动并选择主题，单击“下载”按钮）主题，选择Gallery选项卡，然后单击“日历”图像，preview the theme然后单击“Download下载”按钮。
2. 解压缩下载的文件jquery-ui-1.10.4.custom并将其粘贴到themes -> redmond文件夹下。

Below are the files to apply theme in jqgrid.

以下是在 jqgrid 中应用主题的文件。

Example:

例子：

<link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath()%>/themes/redmond/jquery-ui-1.10.4.custom/css/redmond/jquery-ui-1.10.4.custom.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/themes/redmond/jquery-ui-1.10.4.custom/js/jquery-1.10.2.js" ></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/themes/redmond/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script>

Change jqgrid theme use jquery-ui-1.10.4.custom.css,jquery-1.10.2.js,jquery-ui-1.10.4.custom.jsfiles.

更改 jqgrid 主题使用jquery-ui-1.10.4.custom.css,jquery-1.10.2.js,jquery-ui-1.10.4.custom.js文件。

Step: 1

第1步

Step: 2

第2步

回答by Csaba Toth

Not for jQueryUI themes, but you can switch between jQueryUI and bootstrap variants. I'm using free jqGrid (a branch of trirand jqGrid), and you can tune the look-and-feel with two main options:

不适用于 jQueryUI 主题，但您可以在 jQueryUI 和引导程序变体之间切换。我正在使用免费的 jqGrid（trirand jqGrid 的一个分支），您可以使用两个主要选项调整外观：

1. guiStyles(https://github.com/free-jqgrid/jqGrid/blob/master/dist/jquery.jqgrid.src.js#L600): jQueryUI, bootstrap, bootstrapPrimary, bootstrap4
2. icons: (https://github.com/free-jqgrid/jqGrid/blob/master/dist/jquery.jqgrid.src.js#L389): jQueryUI, fontAwesome, glyph

1. guiStyles( https://github.com/free-jqgrid/jqGrid/blob/master/dist/jquery.jqgrid.src.js#L600): jQueryUI, bootstrap, bootstrapPrimary,bootstrap4
2. icons: ( https://github.com/free-jqgrid/jqGrid/blob/master/dist/jquery.jqgrid.src.js#L389): jQueryUI, fontAwesome,glyph