覆盖 Struts 2 jqGrid CSS答案

【问题标题】：Overriding Struts 2 jqGrid CSS覆盖 Struts 2 jqGrid CSS
【发布时间】：2015-08-21 08:17:30
【问题描述】：

我坚持要覆盖网格的默认struts2-jquery-plugin 样式表。我尝试定义自己的样式表 (jquery-ui-grid.css) 并将其包含在我的 JSP 页面中，但框架总是最后下载默认 CSS (ui.jqgrid.css) 并覆盖我自己的样式。

我已经使用 Chrome 开发者工具来观察网络请求，因此我可以验证默认 CSS 和我的自定义 CSS 是否都在下载，但只应用了默认 CSS（我猜是因为它是最后下载的）。由于这个 default CSS 是由 Struts 2 框架生成的，我不知道如何修改/覆盖它，因为我不知道这个文件的路径。

我目前正在使用 Maven 来管理我的依赖项，并且 struts2-jquery-plugin 和 struts2-jqgrid-plugin 已包含在 Maven 中。

我正在尝试更改网格的字体大小，此时我有点绝望...

如何覆盖/修改插件用于设置网格样式的默认 CSS 文件？我不想更改应用于 HTML 表格的样式，我正在寻找一种解决方案，允许我专门修改 jqGrid 相关的 CSS 类。

编辑：

正如this question 中提到的，我在jquery-ui 之后包含了我的CSS（在<head /> 标记内）：

<head>
...
<s:head />
<sj:head jqueryui="true" jquerytheme="south-street" loadAtOnce="true"  loadFromGoogle="false" locale="es"/>
<link href="<s:url value='/styles/main.css'/>" rel="stylesheet" type="text/css" media="all" /> 
...
</head>

在我的main.css 中属于所有的 CSS 导入：

/*
   Css Framework 
   =============
     - see http://www.contentwithstyle.co.uk/Articles/17/a-css-framework
       for more info.
*/
@import url("tools.css");
@import url("typo.css");
@import url("forms.css");
@import url("layout.css");
/* This is my "custom" jqGrid stylesheet: */
@import url("ui.jqgrid.css");
@import url("dl-forms.css");

进度更新：

我仍然无法按照我的意愿覆盖，所以现在我不得不停止使用从互联网上提供的 jquery-ui 主题（我更喜欢这种方式，以便我可以随时更新它，因为无需对我的 web 应用程序的 jQuery UI CSS 进行重大调整）。
我下载了我正在使用的主题并将其放入我的 webapp (template/themes/myTheme-name/)，所以我可以强制框架使用该明确的主题而不是下载它，这确实有效，我现在可以修改我的 custom jqGrid 的 CSS。但我觉得这只是一种解决方法，我想知道如何以干净的方式做到这一点。

【问题讨论】：

标签： css struts2 jqgrid struts2-jquery-plugin struts2-jquery-grid

【解决方案1】：

这些是创建/修改custom theme的步骤：

使用jQuery ThemeRoller创建和下载您自己的主题

在您的WebRoot 路径template/themes/mytheme 中创建一个文件夹

解压下载的主题并切换到css文件夹中

将jquery-ui-x.x.x.custom.css 重命名为jquery-ui.css

将jquery-ui.css 和images 文件夹复制到template/themes/mytheme 文件夹中。
<%@ taglib prefix="s" uri="/struts-tags"%> 
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%> 
<html>   
   <head>
    <s:url var="context" value="/" />
    <sj:head locale="de" jqueryui="true" jquerytheme="mytheme" customBasepath="%{context}template/themes"/>   
   </head>
   <body>  
   </body> 
</html>

您还可以使用scriptPath 属性来放置您的JS 代码。与使用 CSS 的方法相同，但复制到 js 文件夹中。

【讨论】：

感谢您的回答@Roman。这个解决方案是我在我的问题上使用和更新的解决方案，但正如我在我的进度更新中所描述的那样，这样做意味着从ThemeRoller 下载主题并将其存储在我的 webapp 上（我想继续下载每次需要时从 jQuery ui 服务器获取它，这样我就可以随时更新它）。我希望有另一个解决方案允许我仅在我的 web 应用程序中存储和修改 jqGrid 样式..