开发者

How to change the theme of the jqGrid?

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/p开发者_运维技巧rojects. 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 document doesn't help me much!

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

  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


jQuery user interface ThemeRoller provides 24 themes.

  1. For changing jqgrid theme simply download Redmond(Scroll down and select theme click Download button) theme by selecting Gallery tab then click on Calendar image for preview the theme then click on Download button for downloading.
  2. Extract the downloaded file jquery-ui-1.10.4.custom and paste it under themes -> redmond folder.

Below are the files to apply theme in 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.js files.

Step: 1

How to change the theme of the jqGrid?

Step: 2

How to change the theme of the jqGrid?


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:

  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
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜