如何更改jqGrid的主题?

时间:2010-09-16 23:44:55

标签: jquery asp.net-mvc jquery-ui jqgrid themes

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

你是如何改变jqGrid的主题的? 我正在寻找:

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

2 个答案:

答案 0 :(得分:5)

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

  1. 要更改jqgrid主题,只需选择Gallery标签下载Redmond(向下滚动并选择主题点击下载按钮)主题,然后点击日历图片即可preview the theme然后点击Download按钮进行下载。
  2. 解压缩下载的文件jquery-ui-1.10.4.custom并将其粘贴到themes -> redmond文件夹下。
  3. 以下是在jqgrid中应用主题的文件。

    示例:

    <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>
    

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

    步骤:1

    themeroller

    步骤:2

    themes

答案 1 :(得分:2)

不适用于jQueryUI主题,但您可以在jQueryUI和bootstrap变体之间切换。我使用免费的jqGrid(trirand jqGrid的一个分支),你可以通过两个主要选项来调整外观:

  1. guiStyleshttps://github.com/free-jqgrid/jqGrid/blob/master/dist/jquery.jqgrid.src.js#L600):jQueryUIbootstrapbootstrapPrimarybootstrap4
  2. icons :( https://github.com/free-jqgrid/jqGrid/blob/master/dist/jquery.jqgrid.src.js#L389):jQueryUIfontAwesomeglyph